Study Note

React Native 快速學習自我挑戰 Day1

Symbols count in article: 926 Reading time: 4 mins.

開始課程

第一支程式的 Roadmap

  1. 在每個作業系統安裝 dependencires
  2. 針對不同編輯器安裝不同的 ESLint
  3. 生成 React Native 專案
  4. 課程 Repo

在不同的系統部署環境

OSX 安裝流程

  1. 了解 Dependency 的用途
    • XCode：打包程式和 React Natvie Library 到可安裝的 app，然後用 iOS 模擬器運行
    • HomeBrew：被用來安裝 node
    • Node/NPM：Node 在瀏覽器之外運行 JavaScript，NPM 被用來安裝和管理 dependencies，Node 和 NPM 會在一起
    • watchman：在硬碟上監控檔案，等待它們被改變
    • RN CLI：React Native Command Line 界面，用來產生新的 React Native 專案
  2. 依序安裝
  3. 開啟專案 react-native run-ios

Windows 安裝流程

  1. 必須安裝的軟體
    • python 2.7
    • node
    • JAVA SDK
    • Android Studio
    • npm install -g react-native-cli --no-optional
  2. 開啟 Android Studio，修正所有錯誤，開啟 AVD，啟動一個模擬器
  3. 設定環境變數，JAVA_HOME，值為 C:\Program Files\Java\jdk_版本號，另外將 C:\Users\使用者名稱\AppData\Local\Android\sdk\platform-tools 加入 path 環境變數
  4. 開啟專案 react-native run-android

ESLint 設定 (VS code)

  1. npm install eslint -g 全域安裝 ESLint
  2. npm install --save-dev eslint-config-standard
  3. 在專案根目錄新增檔案 .eslintrc
  4. 在 .eslintrc 新增以下內容
1
2
3
{
    "extends": "standard"
}

向前進！

  1. React Native 安裝疑難排解
  2. 從 ios.index.js 開始，先刪除所有檔案，首先引入函式庫
1
2
import React from 'react';
import ReactNative from 'react-native';
  1. React vs React Native
    • React 知道 compoent 該怎麼表現
    • React 知道如何拿一堆 components 且讓他們一起運作
    • React Native 知道如何從 component 取得 output 且將它呈現在螢幕上
    • React Native 提供核心套件 (image, text)
  2. 創建一個 Component
1
2
3
4
5
const App = () => {
    return (
        <Text>Some Text</Text>
    );
};
  1. 將套件內容讀取出來
    ReactNative.AppRegistry.registerComponent('albums', () => App);
  2. 將 ReactNative 取代為 { Text, AppRegistry }，這樣的做法就是只使用 ReactNative 裡面的 Text 元件
    import { Text, AppRegistry } from 'react-native';
    AppRegistry.registerComponent('albums', () => App);
  3. 創建 Component 的部分可以簡化
1
2
3
const App = () => (
    <Text>Some Text</Text>
);
  1. 新增一個檔案 src/components/header.js
  2. 在 header.js 引入函式庫
1
2
import React from 'react';
import { Text } from 'react-native';
  1. 製作 Component
1
2
3
const Header = () => {
    return <Text>Albums!</Text>;
};
  1. 接下來要讓 Component 可以在 app 的其它部分使用，但是只有 root Component 才用 “AppRegistry”，在這邊我們使用export default Header;
  2. 在 root 呼叫 Component
    import Header from './src/components/header';
  3. 再來直接將 Header 放在 Component 裡面
1
2
3
const App = () => (
    <Header />
);

處理樣式問題

  1. 在 header.js 新增樣式
1
2
3
4
5
const styles = {
    textStyle: {
        fontSize: 20
    }
};
  1. 將樣式加入 component
1
2
3
4
5
const Header = () => {
    const { textStyle } = styles;

    return <Text style={textStyle}>Albums!</Text>;
};
  1. 引入 view import { Text, View } from 'react-native';
  2. 新增 viewStyle
1
2
3
4
5
6
7
8
const styles = {
    viewStyle: {
        backgroundColor: '#F8F8F8'
    },
    textStyle: {
        fontSize: 20
    }
};
  1. 使用 viewStyle
1
2
3
4
5
6
7
8
9
const Header = () => {
    const { textStyle, viewStyle } = styles;

    return (
        <View style={viewStyle}>
            <Text style={textStyle}>Albums!</Text>
        </View>
    );
};
  1. 使用 flexbox
    • justifyContent: ‘flex-end’ 將物件移至垂直最下方
    • justifyContent: ‘center’ 將物件移至垂直中間
    • justifyContent: ‘flex-start’ 將物件置於垂直上方，其實就是預設
    • alignItems: ‘flex-start’ 將物件置於水平上方，其實就是預設
    • alignItems: ‘center’ 將物件移至水平中間
    • alignItems: ‘flex-end’ 將物件移至水平最右方
  2. 修改 viewStyle
1
2
3
4
5
6
7
8
9
10
11
12
viewStyle: {
        backgroundColor: '#F8F8F8',
        justifyContent: 'center',
        alignItems: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        elevation: 2,
        position: 'relative'
    },

讓 Header 可以再使用

  1. 將本來文字的地方用 props 取代 {props.headerText}
  2. 另外要將 props 的變數放入 function const Header = (props) => {
  3. 在 index 的 component 裡面放入 props <Header headerText={'Albums'} />
Share