React Native 学习
2018-06-07 本文已影响0人
我家的小鲤鱼
参考资料：https://reactnative.cn/docs/0.51/getting-started.html
本人系统和电脑配置
111.png
参考React Native 0.51官方版本
react-native-cli: 2.0.1
react-native: 0.55.4
参考资料：
React Native react-navigation 导航使用详解
https://www.jb51.net/article/129575.htm
参考免费视频：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
第一步：搭建开发环境
1.安装软件Homebrew
环境搭建成功
222.png
提示：如果使用VSCode编程，打开code-首选项-设置，然后搜索修改”emmet.triggerExpansionOnTab”属性为true ，修改后可以提示书写代码
基本操作
- command D打开页面操作面板
Flexbox 布局
flexDirection：
row水平向右；
row-reverse水平向左；
column：竖直向下；
column-reverse竖直向上。
justifyContent：
flex-start开始的方向依次摆放；
center中间按规定方向摆放；
flex-end靠着结束的方向依次摆放；
space-between相同间隔靠边按所需方向摆放默认为竖直向下；
space-around相同间隔组件和边也是相同间隔，按所需方向摆放默认为竖直向下。
flexWarp：
nowarp波浪型水平向右；
warp波浪形竖直向下；
warp-reverse波浪形竖直向上。
alignItems：
flex-start；元素放在次轴开始方位
center；元素放在次轴中间方位
flex-end；元素放在次轴结束方位
stretch；元素布满整个次轴，如果宽或者高与次轴写死的话，当与次轴重和是这个设置无效无效
alignContent；
stretch；
flex-start；
content；
flex-end；
space-between；
space-around
用编辑器打开目录中的.js文件发现有不少单词：
*Component 组件，零件
*export 输出出口
* extends 扩展延伸
* constructor 构造函数
*flex 弹性
*
*
*
*
*
*
*
*
*
*
基本语法
*批量自定义组件
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
*render方法就是渲染视图；
return返回的是视图的模板；
StyleSheet.create提供视图的样式，引用方式为style={styles.container}.其中style是视图的一个属性，styles是我们定义的样式表，container是样式表中的一个样式。；
代码如下：
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
React-Native入门学习!
</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毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
代码解释：
setInterval（） 多少秒循环执行 ，settime 执行一次；后面的括号表示执行的函数 ;() => {} 这个括号表示入参为空，后面括号为函数。
*{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
//以空格为据切割字符串，合成一个数组。然后把每个数组元素转换为🍕，并在后面加空格
*
*
*
*
*
*
*
*
*
*
*
*
*
常见问题
*单词拼写要注意
*括号括的范围要注意
*逗号等符号中英文不一样
*
*
*
*
*
*
*
*
*
*
*
MaciOS终端命令
cd ../ 回到上一级目录
touch index.js 创建文件
react-native init TestApp 建立一个新的工程名字叫TestApp、
react-native run-ios 运行工程
- 问题：
1.终端执行命令报错
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.
- 解决方案
当前登录用户没有管理员权限，系统偏好设置-用户与群组-设置为管理员-重启电脑再执行命令就行
重新执行命令，吃个中饭，中午睡了一觉醒来命令执行结束
2.运行程序报错提示：
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))
解决方案：执行上面提示的命令，然后关机重启
3.运行程序报错提示：
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.))
解决方案：
重启服务执行以下命令，对应电脑更换自己的前缀：
/Users/apple/Desktop/memedaiRN/node_modules/react-native/scripts/launchPackager.command ; exit;
3.运行程序报错提示：
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没有引用！！！
Image加入组件引用列表
import { Text, View, StyleSheet, TextInput,ImageBackground, Image} from 'react-native';
4.运行程序报错提示：
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))
解决方案：
英文意思，重复定义了组件名WalletXXWView，找找是不是有重名
5.react环境已经准备好，无法加载js文件：
Loading dependency graph, done.
没有下面的
BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░ 81.3% (439/493)
原因是我用的4G网络链接不上我本地的电脑...坑！！！
react native热更新
参考资料：
代码实现react-native热更新(iOS)
https://www.jianshu.com/p/1240e4eae418
ReactNative - 打离线包 (一) 原生RN命令打包
https://www.jianshu.com/p/bb7c5f1d304e
React-Native做本地服务器热更新/热部署(IOS)
https://www.jianshu.com/p/7ebea5ced11b
iOS mac本地服务器
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.运行打包bundle文件报错提示：
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-*`.
解决方案：在终端上面运行一下上面的提示指令就行
2.运行打包bundle文件报错提示：
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文件夹下面建一个空的bundle文件夹
