一蜡豹、寫在前面：從零入門ReactNative的建議
- 1、需要有html溉苛、js镜廉、css等前端編程語言
- 2、然后愚战，先去理解React基本使用
- 3娇唯、搭建ReactNative開發(fā)環(huán)境，選用iOS/Android先把項(xiàng)目運(yùn)行起來寂玲。
- 4塔插、學(xué)習(xí)ReactNative基本開發(fā)流程。
- 5敢茁、寫頁面必須先搞懂flex布局方式佑淀。
- 6、學(xué)習(xí)ReactNative相關(guān)組件彰檬。
- 7伸刃、深入學(xué)習(xí)ReactNative的原理等高級(jí)知識(shí)。
- 8逢倍、閱讀源碼捧颅，真正的搞懂它。
二较雕、搭建環(huán)境
依賴Node環(huán)境
brew install node
node -v查看node版本
sudo npm cache clean -f清除緩存
sudo n stable升級(jí)到穩(wěn)定版本
sudo npm install -g n按照node安裝
watchman
brew install watchman
是 facebook 的一個(gè)開源項(xiàng)目碉哑，它開源用來監(jiān)視文件并且記錄文件的改動(dòng)情況，當(dāng)文件變更它可以觸發(fā)一些操作,例如執(zhí)行一些命令等等亮蒋。創(chuàng)建項(xiàng)目
npx react-native init xxx_name_xxx啟動(dòng)
yarn ios扣典。
或者直接使用xcode啟動(dòng)工程編譯調(diào)試。
三慎玖、搞懂npx react-native init xxx_name_xxx創(chuàng)建的工程目錄
- react-native 相關(guān)命令
react-native init MyAppName --version 0.64.0
react-native --version查看版本
npx react-native info命令查看當(dāng)前的版本
核心幾個(gè)文件：
- 工程入口代碼文件
index.js - App組件定義
App.js贮尖，當(dāng)然也可以新建文件定義組件。 -
App.jsonRN模塊的配置
{ "name": "HelloFirstRNDemo",
"displayName": "HelloFirstRNDemo"}
其中name配置字符串趁怔，必須和RCTRootView初始化initWithBridge:moduleName:initialProperties:用到的moduleName一樣湿硝。
- iOS和Android兩個(gè)文件夾是原生相關(guān)的工程。
-
package.json工程的配置文件润努，定義腳本命令关斜、包依賴、測(cè)試等相關(guān) - 相關(guān)依賴庫
node_modules
DC34CDDB-9096-49D5-8532-F9B893EDC804.png
四铺浇、ReactNative開發(fā)基本流程
4.1痢畜、ReactNative代碼
- 1、在
App.js中，導(dǎo)入RN相關(guān)的組件
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
Text,
useColorScheme,
View,
} from 'react-native';
- 2丁稀、在
App.js中繁涂，自定義組件，即搭建頁面二驰。
class HelloWorld extends React.Component {
render() {
return (
<SafeAreaView>
<Text style={styles.title}> hello my world! </Text>
<ScrollView>
<Section> section 1</Section>
</SafeAreaView>
)
}
}
- 3、在
App.js中秉沼，定義樣式桶雀，推薦統(tǒng)一定義樣式，RN使用布局方式為Flex布局唬复。
const styles = StyleSheet.create({
title: {
fontSize: 42,
},
});
- 4矗积、在
index.js中，組件的注冊(cè)
import {AppRegistry} from 'react-native';
import {HelloWorld} from './App';
import {name as appName} from './app.json';
// 第一個(gè)參數(shù)：應(yīng)用名稱敞咧，第二個(gè)參數(shù)：組件名棘捣。
AppRegistry.registerComponent(appName, () => HelloWorld);
4.2、原生端（iOS為例）
- 初始化
RCTBridge休建，RN的核心類乍恐，負(fù)責(zé)原生和React的交互
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
// 其中self為實(shí)現(xiàn)RCTBridgeDelegate的實(shí)例，必須實(shí)現(xiàn)方法如下：
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
NSURL *url = nil;
#if DEBUG
url = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
url = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
return url;
}
- 初始化ReactNative代碼的加載容器類
RCTRootView
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"FirstRNDemo"
initialProperties:nil];
四测砂、調(diào)試
開發(fā)中茵烈，一般使用iOS的模擬器調(diào)試，簡(jiǎn)單便捷砌些。當(dāng)然集成的時(shí)候需要打包到真機(jī)上運(yùn)行看看呜投。相關(guān)參見ReactNative中文網(wǎng)相關(guān)教程。
其他
- 關(guān)于Demo工程中的存璃，TypeScript的語法
const App: () => React$Node = () => {...}
實(shí)際等價(jià)于const App = () => {...}
其實(shí)際是TypeScript的語法仑荐，它類型定義：const hello : string = "Hello World!"。
// 定義一個(gè)類型纵东，這個(gè)類型是一個(gè)返回ReactNode;
也就是說() => React$Node` 是一種函數(shù)類型
// 聲明一個(gè) const 變量粘招，類型是 TypeApp，值是一個(gè)箭頭函數(shù)
const App: TypeApp = () => { ...};
學(xué)習(xí)實(shí)例
參考
Facebook-ReactNative
ReactNative中文網(wǎng)
React-Native 樣式指南
Flex 布局教程：語法篇
RN2--JavaScript篮迎、ES6男图、Node
React Native在美團(tuán)外賣客戶端的實(shí)踐
React Native 的未來與React Hooks
《React Native 精解與實(shí)戰(zhàn)》 讀書筆記
- 書籍：
《React Native 精解與實(shí)戰(zhàn)》
