React Native之坑总结（持续更新）

React Native之坑总结（持续更新）

Genymotion安装与启动

之前我用的是蓝叠(BlueStack)模拟器，跑RN程序也遇到了一些问题，都通过搜索引擎解决了，不过没有记录。

但是BlueStack有一些问题，比如没有菜单键，模拟器默认是横向的，商业化太严重（本来是用来玩游戏的），界面太丑，等等......

于是我按照RN中文网的推荐下载了Genymotion模拟器，这一下，就是万劫不复......

我是在官网下载的Genymotion，自带VirtualBox 5.0.4版本。下载安装好后，我创建了一个virtual device，一切看起来都很正常。然而，当我点击Start后，却弹出错误提示，内容如下：

Unable to start the virtual device.
VirtualBox cannot start the virtual device.
To find out the cause of the problem, start the virtual device from VirtualBox.

我去百度以上信息，结果都是让我打开VirtualBox，设置balabala云云。悲剧的是，我的VirtualBox根本打不开。去搜索也没有什么有效信息。无奈我下了个4.3版本的VirtualBox重装了下，这次轮到Genymotion打不开了。提示如下：

Unable to load VirtualBox engine.
Make sure that it is properly installed before starting Genymotion.

这个问题也是找了各种办法都没有用。

最后，我去官网下载了最新版的VirtualBox 5.18，结果好了。

内心真是崩溃。。花了近两个小时终于搞定了。。

Genymotion模拟器启动后，adb devices中显示找不到设备

解决办法：在Genymotion中Settings->ADB中选中Use custom Android SDK tools，选择Android SDK路径即可。

启动应用显示could not get batchedBridge

完整信息如下：

Could not get BatchedBridge, make sure your bundle is packaged correctly.

解决方法：点击模拟器的选项键或点击摇晃按钮，会弹出一个菜单，选择Dev Settings，在弹出的页面中点击Debug server host & port for device，填入本机IP + ":8081"，如：10.138.253.3:8081。

获取本机IP的方法是在cmd中输入ipconfig。

启动RN应用后，提示找不到packager

我自然是启动了packager的，而且应用的Debug server host & port for device中也填了本机IP:10.138.253.3:8081。

然后出现这个问题就很奇怪了，后来我在网上找到了这篇帖子，里面提到了localhost与127.0.0.1，于是我去查了这两个东西。

发现127.0.0.1一定是本机IP，但是localhost有可能被解析成完全不同的IP地址，也就出现了上面找不到packager的情况。

于是我将应用的Debug地址改为了127.0.0.1:8081。果然成功了。

但是很奇怪的问题是为什么我使用BlueStack模拟器的时候填本机IP是没问题的，到了Genymotion就不行了。这个问题暂且搁置。。。

又一波血与泪的教训

其实大部分是自己写代码的时候没有注意小细节，RN的IDE又没有这么智能，所以出现了很多奇怪的错误。最后的错误报告可能和你写错的地方一点关系都没有，很蛋疼。。。

• 类名要大写

• 有一句let Component = route.component;中的第一个Component的首字母要大写。

• antd-mobile的tabs组件有个bug：如果一个子页面中有输入框，输入任意一个字符后，tabs会自动向左滑动（最左边的子页面没有这个问题）。于是我把滑动的tabs换成了react-native-scrollable-tab

• 如果不用ant design的form代码，就无法输入字符。下面是一个示例：

  import React, { Component } from 'react';
  import {
      Text,
      View
  } from 'react-native';
  import Button from 'antd-mobile/lib/button';
  import WhiteSpace from 'antd-mobile/lib/white-space';
  import List from 'antd-mobile/lib/list';
  import InputItem from 'antd-mobile/lib/input-item';
  import WingBlank from 'antd-mobile/lib/wing-blank';
  import { createForm } from 'rc-form';
  
  class Register extends Component {
      render() {
          const {getFieldProps} = this.props.form;
          return (
              <View style={{flex: 1}}>
                  <List>
                      <InputItem
                          {...getFieldProps('registerusername', {
                              initialValue: ''
                          })}
                          clear
                          placeholder="6-12位字母或数字"
                      >用户名</InputItem>
                      <InputItem
                          {...getFieldProps('registernickname', {
                              initialValue: ''
                          })}
                          clear
                          placeholder="6-14位字符，一个汉字为两个字符"
                      >昵称</InputItem>
                      <InputItem
                          {...getFieldProps('registerpassword', {
                              initialValue: ''
                          })}
                          type="password"
                          clear
                          placeholder="******"
                      >密码</InputItem>
                  </List>
                  <WhiteSpace size="lg"/>
                  <WingBlank>
                      <Button type="default" color="'#000000">注册</Button>
                  </WingBlank>
                  <WhiteSpace size="lg"/>
              </View>
          );
      }
  }
  
  Register = createForm()(Register);
  module.exports = Register;
  

不过这里的InputItem输入之后如何提交还需要研究。。

持续更新中……

Component类的一些方法

• 在组件的生命周期中，getInitialState() 只执行一次，它负责对组件的state进行初始化。
• 这里的componentDidMount是一个在React组件渲染以后将被React调用的方法。

一个坑

const { dispatch, room } = props;

这里的props更新之后，就不能再用room来访问更新的内容了，因为room是之前就确定的一个常量。