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 安裝時所鎖定的特定版本的描述檔

程式碼的內容

//從 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來運行程序
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 想成是 divText 想成是 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.宣告一個常量 constconst 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 想成是 divText 想成是 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,
},
});

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store