參考資料：https://reactnative.cn/docs/0.51/getting-started.html
本人系統(tǒng)和電腦配置
111.png
參考React Native 0.51官方版本
react-native-cli: 2.0.1
react-native: 0.55.4
參考資料：
React Native react-navigation 導(dǎo)航使用詳解
https://www.jb51.net/article/129575.htm
參考免費(fèi)視頻：https://ke.qq.com/webcourse/index.html#course_id=197101&term_id=100340928&taid=2091679138120173&vid=a1417i5op7k
原生與rn交互
http://blog.sina.com.cn/s/blog_6306d14c0102wfiq.html
iOS navigation組件
https://blog.csdn.net/lu1024188315/article/details/73550028
rsa加密
https://www.npmjs.com/package/react-native-rsa
第一步：搭建開(kāi)發(fā)環(huán)境
1.安裝軟件Homebrew
環(huán)境搭建成功
222.png
提示：如果使用VSCode編程寂玲，打開(kāi)code-首選項(xiàng)-設(shè)置镜廉，然后搜索修改”emmet.triggerExpansionOnTab”屬性為true 既穆，修改后可以提示書(shū)寫(xiě)代碼
基本操作
- command D打開(kāi)頁(yè)面操作面板
Flexbox 布局
flexDirection：
row水平向右龄砰；
row-reverse水平向左故俐；
column：豎直向下；
column-reverse豎直向上膜钓。
justifyContent：
flex-start開(kāi)始的方向依次擺放桃煎；
center中間按規(guī)定方向擺放；
flex-end靠著結(jié)束的方向依次擺放笤受；
space-between相同間隔靠邊按所需方向擺放默認(rèn)為豎直向下穷缤；
space-around相同間隔組件和邊也是相同間隔箩兽，按所需方向擺放默認(rèn)為豎直向下绅项。
flexWarp：
nowarp波浪型水平向右；
warp波浪形豎直向下比肄；
warp-reverse波浪形豎直向上快耿。
alignItems：
flex-start；元素放在次軸開(kāi)始方位
center芳绩；元素放在次軸中間方位
flex-end掀亥；元素放在次軸結(jié)束方位
stretch；元素布滿整個(gè)次軸妥色，如果寬或者高與次軸寫(xiě)死的話搪花，當(dāng)與次軸重和是這個(gè)設(shè)置無(wú)效無(wú)效
alignContent；
stretch；
flex-start撮竿；
content吮便；
flex-end；
space-between幢踏；
space-around
用編輯器打開(kāi)目錄中的.js文件發(fā)現(xiàn)有不少單詞：
*Component 組件髓需，零件
*export 輸出出口
* extends 擴(kuò)展延伸
* constructor 構(gòu)造函數(shù)
*flex 彈性
*
*
*
*
*
*
*
*
*
*
基本語(yǔ)法
*批量自定義組件
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
*render方法就是渲染視圖；
return返回的是視圖的模板房蝉；
StyleSheet.create提供視圖的樣式僚匆，引用方式為style={styles.container}.其中style是視圖的一個(gè)屬性，styles是我們定義的樣式表搭幻，container是樣式表中的一個(gè)樣式咧擂。；
代碼如下：
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
React-Native入門(mén)學(xué)習(xí)!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
*class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
代碼解釋?zhuān)? setInterval（） 多少秒循環(huán)執(zhí)行 檀蹋，settime 執(zhí)行一次松申；后面的括號(hào)表示執(zhí)行的函數(shù) ;() => {} 這個(gè)括號(hào)表示入?yún)榭眨竺胬ㄌ?hào)為函數(shù)俯逾。
*{this.state.text.split(' ').map((word) => word && '??').join(' ')}
//以空格為據(jù)切割字符串攻臀，合成一個(gè)數(shù)組。然后把每個(gè)數(shù)組元素轉(zhuǎn)換為??纱昧，并在后面加空格
*
*
*
*
*
*
*
*
*
*
*
*
*
常見(jiàn)問(wèn)題
*單詞拼寫(xiě)要注意
*括號(hào)括的范圍要注意
*逗號(hào)等符號(hào)中英文不一樣
*
*
*
*
*
*
*
*
*
*
*
MaciOS終端命令
cd ../ 回到上一級(jí)目錄
touch index.js 創(chuàng)建文件
react-native init TestApp 建立一個(gè)新的工程名字叫TestApp刨啸、
react-native run-ios 運(yùn)行工程
- 問(wèn)題：
1.終端執(zhí)行命令報(bào)錯(cuò)
Ignoring executable-hooks-1.3.2 because its extensions are not built. Try: gem pristine executable-hooks --version 1.3.2
Ignoring ffi-1.9.14 because its extensions are not built. Try: gem pristine ffi --version 1.9.14
Ignoring gem-wrappers-1.2.7 because its extensions are not built. Try: gem pristine gem-wrappers --version 1.2.7
This script requires the user apple to be an Administrator.
- 解決方案
當(dāng)前登錄用戶沒(méi)有管理員權(quán)限，系統(tǒng)偏好設(shè)置-用戶與群組-設(shè)置為管理員-重啟電腦再執(zhí)行命令就行
重新執(zhí)行命令识脆，吃個(gè)中飯设联，中午睡了一覺(jué)醒來(lái)命令執(zhí)行結(jié)束
2.運(yùn)行程序報(bào)錯(cuò)提示：
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module `tty` from `/Users/apple/Desktop/memedaiRN/node_modules/window-size/index.js`: Module `tty` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`. (null))
解決方案：執(zhí)行上面提示的命令，然后關(guān)機(jī)重啟
3.運(yùn)行程序報(bào)錯(cuò)提示：
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Could not connect to development server.
Ensure the following:
- Node server is running and available on the same network - run 'npm start' from react-native root
- Node server URL is correctly set in AppDelegate
- WiFi is enabled and connected to the same network as the Node Server
URL: http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false The operation couldn’t be completed. (NSURLErrorDomain error -1001.))
解決方案：
重啟服務(wù)執(zhí)行以下命令灼捂，對(duì)應(yīng)電腦更換自己的前綴：
/Users/apple/Desktop/memedaiRN/node_modules/react-native/scripts/launchPackager.command ; exit;
3.運(yùn)行程序報(bào)錯(cuò)提示：
ReferenceError: Can't find variable: Image
This error is located at:
in WalletJXLView (at SceneView.js:10)
in SceneView (at StackViewLayout.js:488)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:539)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:434)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:433)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:58)
in RCTView (at View.js:60)
in View (at Transitioner.js:163)
in Transitioner (at StackView.js:22)
in StackView (at createNavigator.js:133)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:393)
in NavigationContainer (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
解決方案：主要看第一行离例，組件Image沒(méi)有引用！Ｏこ怼宫蛆！
Image加入組件引用列表
import { Text, View, StyleSheet, TextInput,ImageBackground, Image} from 'react-native';
4.運(yùn)行程序報(bào)錯(cuò)提示：
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(TypeError: /Users/apple/Desktop/memedaiRN/App.js: Duplicate declaration "WalletXXWView" (null))
解決方案：
英文意思，重復(fù)定義了組件名WalletXXWView的猛，找找是不是有重名
5.react環(huán)境已經(jīng)準(zhǔn)備好耀盗，無(wú)法加載js文件：
Loading dependency graph, done.
沒(méi)有下面的
BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓??? 81.3% (439/493)
原因是我用的4G網(wǎng)絡(luò)鏈接不上我本地的電腦...坑！Ｘ宰稹叛拷！
react native熱更新
參考資料：
代碼實(shí)現(xiàn)react-native熱更新(iOS)
http://www.reibang.com/p/1240e4eae418
ReactNative - 打離線包 (一) 原生RN命令打包
http://www.reibang.com/p/bb7c5f1d304e
React-Native做本地服務(wù)器熱更新/熱部署(IOS)
http://www.reibang.com/p/7ebea5ced11b
iOS mac本地服務(wù)器
https://blog.csdn.net/u010281174/article/details/53706712
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle
1.運(yùn)行打包bundle文件報(bào)錯(cuò)提示：
Unable to resolve module `redux` from `/Users/apple/Desktop/memedaiRN/js/service/redux/Store.js`: Module `redux` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
解決方案：在終端上面運(yùn)行一下上面的提示指令就行
2.運(yùn)行打包bundle文件報(bào)錯(cuò)提示：
Loading dependency graph, done.
bundle: Writing bundle output to: ./ios/bundle/index.jsbundle
ENOENT: no such file or directory, open './ios/bundle/index.jsbundle'
解決方案：需要在ios文件夾下面建一個(gè)空的bundle文件夾
