React Native 跨平台APP開發學習筆記(二)：目錄結構

目錄結構

在上一篇文章當中，我們輸入了指令 react-native init AwesomeProject 之後，會產生一個如下方所列出的結構目錄：

__tests__
android/
ios/
node_modules/
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
App.js
app.json
babel.config.js
index.js
metro.config.js
package.json
package-lock.json
// __tests__：測試檔案的資料夾
// android： Android 檔案的資料夾
// ios： iOS 相關檔案的資料夾
// node_modules/：安裝的模組會存在這個資料夾
// .flowconfig：Flow 的設定檔
// App.js : 主程式
// app.json : React Native的APP設定檔
// index.js ：宣告app註冊元件, 基本上可保留現有設定，不需更動
// package.json：npm 安裝依賴套件的描述檔
// package-lock.json：npm 安裝時所鎖定的特定版本的描述檔

程式碼的內容

index.js

//從 react-native 輸入 AppRegistry 元件
import {AppRegistry} from 'react-native'; 
// 輸入 App 元件
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry是JS運行所有React Native應用的入口
應用的根組件通過 AppRegsitry.registerComponent 方法註冊自己
然後原生系統才可以加載應用的代碼包。並且在啟動完成後
調用AppRegistry.runApplication來運行程序

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    '連點鍵盤上的R按鈕以重新載入\n'
});
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
              //與下方的StyleSheet.create搭配
      <View style={styles.container}>
        <Text style={styles.welcome}>歡迎來到React Native!</Text>
        <Text style={styles.instructions}>請修改App.js查看變化</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}    // View 想成是 div，Text 想成是 p 類似html的網頁開發概念
// 用 StyleSheet.create 來建立 Style(類似CSS)
// 所有的 CSS 屬性都需要寫成 camelCase (駝峰式命名)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

1. import React, { Component } from 'react';
 這邊是在輸入 react 組件的 React 與 Component 元件
 直接影響是下面的宣告
import React, { Component } from 'react';
export default class App extends Component {}
也可使用以下方式:
import React from 'react';
export default class App extends React.Component {}
2. 輸入 react-native 內的元件
import {
  Platform, // 可用來判斷ios / android 平台並執行操作
  StyleSheet, // 依據CSS樣式來美化 APP
  Text, // 所有輸入文字的組件 通用Text 類似html的 <p /> 標籤
  View // 類似html的<div />, <span />, <Section />, <Article /> 通用View實現
} from 'react-native';
3.宣告一個常量 const
const instructions = Platform.select ({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
}); 
駐:
 是在宣告一個常量 instructions 透過 Platform 元件來做裝置判斷
 當裝置是 IOS 時 instructions = 'Press Cmd+R to reload,\n'
 當裝置是 Android 時 instructions =  
  'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu'
 
 4.輸出基礎元件
export default class App extends Component { } // 當引用App.js時 輸出名稱為App的基礎元件
5.在結構內做樣式宣告
 
 React Native 在定義樣式 很簡單
 概念和 html / css 很接近
 可以直接把樣式寫在原件上 或者 制定一個樣式名稱
 透過樣式名稱來定義
// 直接定義樣式在原件上
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
   <Text style={{ fontSize: 20, textAlign: 'center', margin: 10 }}>
      Welcome to React Native!
   </Text>
</View>
// 制定樣式名稱 在const styles撰寫樣式規則
<View style={styles.container}>   //與下方的StyleSheet.create搭配
  <Text style={styles.welcome}>
     Welcome to React Native!
  </Text>
  <Text style={styles.instructions}>
     To get started, edit App.js
  </Text>
  <Text style={styles.instructions}>
     {instructions} // 判斷裝置後 把對應的字串輸入進來這裡
  </Text>
</View>       // View 想成是 div，Text 想成是 p 類似html的網頁開發概念
// 用 StyleSheet.create 來建立 Style(類似CSS)
// 所有的 CSS 屬性都需要寫成 camelCase (駝峰式命名)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',        // 垂直水平置中
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});