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

2022-03-17 03:25:55

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是之前就确定的一个常量。

码农公寓