React Native 学习

参考资料：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文件夹