React-Native之路上遇到的问题

发表于

最近要研究下React Native，考虑使用RN来写一个安卓端。本篇文章记录一下操作中遇到的各种问题：

知识点

Flexbox

  1. flex
    RN中布局的一个属性，（前提，RN中布局也都是按照前端HTML盒子的性质来布局的）
    如果未设置，则控件根据自己设置的width、height值来改变，
    如果设置为1，且别的同级视图没有设置此属性，则根据和自己平级的view开始，占据父视图的剩余位置
    如果所有的同级视图都设置了此属性，则把父视图等比分为（所有flex值之和）份，按flex值占的比例来显示

  2. alignSelf
    相关的属性有：
    justifyContent: flex-start/flex-end/center/space-between/space-around
    alignItems: flex-start/flex-end/center/stretch
    flexDirection: row/column
    jusityContent属性不会从父视图继承
    但是alignItem属性会继承，因此如果我们父视图设置过了’center’属性，那么子视图也会默认布局为center，如果想要修改交叉轴的布局，但是又不想影响别的view,则可以使用alignSelf属性来修改。
    比如想要实现如下的效果：一个类似iOS tableview的defaultCell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//设置如下：
cell: {
marginTop: 120,
backgroundColor: 'lightgray',
// flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 100,
},
iconImg: {
// flex: 1,
borderColor: 'white',
borderWidth: 0.5,
width: 100,
height: 40,
backgroundColor: 'orange',
},
rightContainer: {
marginLeft: 20,
backgroundColor: 'cyan',
flex: 1,
justifyContent: 'space-around',
alignItems: 'flex-start',
alignSelf: 'stretch',
},

RN基本命令行

react-native init 项目名 初始化创建项目
react-native run-ios/android 命令行启动app
react-native --version 查看RN版本
npm info react-native 查看RN远程仓库所有版本信息
npm update -g react-native-cli 更新本地RN版本
npm install --save react-native@版本号 更新RN到指定版本

插件

WebstormRN代码提示插件

遇到的问题

默认安装过Android Studio virtualbox和Genymotion模拟器

1、Android Studio找不到Genymotion模拟器

解决方法
打开Android Studio首页面，SDK位置：
configure -> Project Defaults -> Project Structure

2、unable to load script from assets index.android.bundle on windows

react-native init xxx之后，打开Android studio，点击运行之后报的这个错。
解决方法：

  1. (in project directory) mkdir android/app/src/main/assets
  2. 1
    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

  3. react-native run-android 该项如果没有安装过JDK则会提示安装，点击下载，安装之后即可使用。

3. 使用npm导入react库之后，提示command run-ios unrecognized

我的理解： 使用npm导入三方库之后，由于module树中没有刚添加的三方库索引，所以，需要重新更新一下module树： npm install。

4. 定时器问题

我在学习写demo的时候，是用的ES5的语法来写的，然后demo中需要使用一个定时器，所以我就调用了React提供的库react-timer-mixin。但是使用的时候，调用this.setInterval()的时候，报错了：
错误图片
然后我查了下，说是mixin不支持ES6语法（但是我用的是ES5的写法，所以我查了半天也不知道哪里的问题，有知道的大神请指教下）

然后处理方法：（不使用Mixin）但是在es6中使用时，需铭记在unmount组件时清除（clearTimeout/clearInterval）所有用到的定时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
componentDidMount() {
this.timer = setInterval(function(){
console.log('每隔1s执行一次的方法');
}，1000);

this.timer = setTimeout(() => {
console.log('I do not leak!');
}, 5000);
}

componentWillUnmount() {
clearTimeout(this.timer);
clearTimeInterval(this.timer);
}

5. 运行react-native run-ios之后提示xcrun: error: unable to find utility “instruments”, not a developer tool or in PATH

这里写图片描述

6. 新建RN项目之后，使用Android studio打开安卓项目，遇到unable to load script from assets index.android.bundle问题

解决方法：
1. cd 到RN项目根目录
2. mkdir android/app/src/main/assets
3. react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
4. react-native run-android

7. 新建项目之后，运行react-native run-ios一直卡在build xxx: double-conversion这里（2018年12月21日，RN version 0.57.8）

新建的React Native 项目，凡是版本号大于0.45的，iOS版本在build的时候会卡在build double conversion 这里。

找到的网上的解决方法如下：
==》解决方案在RN中文网有：http://reactnative.cn/post/4301

简单来说，0.45后的RN项目，会依赖一些三方库，然而在国内这些库很难下载到，翻墙也很难下到。

操作步骤：

1、查询具体需要的三方库：https://github.com/facebook/react-native/blob/master/scripts/ios-install-third-party.sh

2、有好人下好了放在百度云盘里了：https://pan.baidu.com/s/1zvNLcj-TGRDNfzymh2r30A

3、下下来后，把这些压缩文件放到 ~/.rncache（Mac操作：Finder=》前往文件夹=》~/.rncache)

4、然后就可以开始撸码了

还找了一些别的解决方法，如下：

  1. 此问题是react-native 0.44版本之后出现的问题。所以我们强制把版本锁定在0.44
    新建项目可以执行如下指令
    1
    react-native init [PROJECT_NAME] --version 0.44.0

已经创建过后，那么使用npm来重新安装指定版本的react-native即可

There is an issue with 0.45. Like @llanginger said, after downgrading
npm install react-native@0.44.0 If you are using RN 0.44, you’d better keep it as below:
"react": "16.0.0-alpha.6", "react-native": "0.44.0",
works well.

  1. 也有说删除rncache文件夹，nodeModule，然后重新使用yarn安装一遍就可以了

    I solved this problem by deleting .rncache folder within the home directory, deleting node modules and then yarn install, and works like a charm.

https://github.com/facebook/react-native/issues/14368
https://github.com/facebook/react-native/commit/5c53f89dd86160301feee024bce4ce0c89e8c187#commitcomment-23014602