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

Z时代
2024-01-10
分类：综合

react

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;