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文件夹

推荐阅读更多精彩内容