React Native 我的那些坑

最新推荐文章于 2025-06-11 09:13:50 发布

老郭博客

最新推荐文章于 2025-06-11 09:13:50 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react-native入门与实战文章标签： native app react-native

本文链接：https://blog.youkuaiyun.com/gyh790005156/article/details/72846528

react-native入门与实战专栏收录该内容

2 篇文章

订阅专栏

本文分享了作者在React Native开发过程中的实践经验，包括常见的错误排查、组件导航、图片自定义处理、样式设置技巧、props与state正确使用方法及热更新方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自从2016年接触reactnative后，就是一把辛酸泪，各种的不适用和坑，还好，我挺过来了。废话少说，开始说说那些坑。

一、报错500或者could not ….server

这个问题一般是没有启动RN服务，打开一个控制台切到当前项目下，输入react-native start回车就行了。

（1）使用跳转需要在app初始化跳转时，将navigation注入到Component中

renderScene(route, navigator) {
            let Component = route.component;
            return (
                <Component {...route.params} navigator={navigator}/>
            );
        }
    render() {
        // 导航栏的Mapper

        return (
            <Navigator
                initialRoute={{
                    name: 'WelcomePage',
                    component:WelcomePage
                }}
                renderScene={(e, i)=>this._renderScene(e, i)}
            />
        );
    }

在reactNative版本0.43.0之前使用navigation只需要从'react-native'中引入，但是从0.44.0版本之后，就不行了，我也是看了好久，一脸闷逼的不知道什么情况，从别人的github上clone下来的代码能运行，我的就不行了，最后才搞明白是版本的问题

解决方法：换了一个引入

import {
    Navigator,
}from 'react-native-deprecated-custom-components'

三、图片自定义

有时候为了方便，自定义一个公共的Head，那么有些操作的图片需要自定义，这个时候就要传值.

错误的：将图片路径做完传值的参数，但是会报错，说找不见传值路径的图片

    <Image
        style={styles.rightImage}
        source={require(this.props.imageUri)}/>

正确的：

 <Image
        style={styles.rightImage}
        source={this.props.imageUri}/>

 传值：   imageUri:require('../../res/image/ic_action_today.png')

四、样式

对于flex样式支持：

1.alignItems 垂直方向

用来定义伸缩项目在交叉轴上的对齐方式，语法：
alignItems:flex-start(默认值) | flex-end | center | stretch

2 alignSelf

用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉抽为垂直方向的话，只有在不设置高度的情况下才能看到效果)

3.flex

是flex-grow flex-shrink flex-basis 这三个属性的缩写，其语法为： flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数默认值为0 1 auto

4.flexDirection

指定主轴的方向 flex-direction: row | row-reverse | column(默认) | column-reverse

5.flexWrap

默认情况下，项目都排在一条线（又称”轴线”）上。flexWrap属性定义，如果一条轴线排不下，如何换

6.justifyContent 水平方向

其他属性

1.设置背景用：backgroundColor，不要用background
2.设置字体颜色：在<Text/>标签里面设置样式，设置color，不要设置textColor
3.设置数值，不要写单位

五、props和state

props用在对外，设置自定义的属性，State对内，设置数据

在设置这两个值的时候，不要在render渲染的时候更新，由于在render渲染的时候要调用这两个值，如果在这时更新值，就会造成死循环

错误的

<Button onPress={hideMessage('隐藏信息')}>隐藏信息</Button>

正确的：

<Button onPress={()=>{hideMessage('隐藏信息')}}>隐藏信息</Button>

六、热更新

RN特性热更新，其实原生开发也有热更新了，来说说RN热更新

Android原生App中我们实现热修复有很多种选择：Tinker、hotFix、Qzone的热更新等等。基本的思路都是大同小异的。React Native中的热更新有点像App的版本更新，也就是根据查询server端的版本和手机端目前App的版本进行对比，然后来执行是否更新的操作。

根本原因在于React Native的加载启动机制：React Native会将一系列资源打包成js bundle文件，系统加载js bundle文件，解析并渲染。所以，React Native热更新的根本原理就是更换js bundle文件，并重新加载，新的内容就完美的展示出来了。微软为我们提供了CodePush来简化热更新的操作，但是由于速度等原因在国内并没有备受青睐

更新流程图

上面流程图中展示了如何实现更新的步骤，可以总结为如下几点：

进入App根据版本检查是否需要更新：

（1）更新：

下载最新JsBundle文件以及所需要的图片资源等，下载完成后解析最新JsBundle文件。

（2）不更新：

判断本地是否还有缓存的JsBundle文件：

1>存在：

本地存在JsBundle，即有过热更新操作。那么App直接加载在缓存目录下的JsBundle文件。

2>不存在：

本地不存在JsBundle，即之前从未有过热更新操作。那么App只能使用初始化时打包在assets目录下的index.android.bundle文件。

大家可能会说，如果bundle太大的情况下怎么办呢？没错，这个问题同样在博客开始也提到了。打包成zip也是为了减小更新文件体积，减少用户流量消耗，同样，我们也可以生成用生成补丁包的方式来进一步减小更新包zip的体积。

初始项目发布时，生成并保留一份index.android.bundle文件。
有版本更新时，生成新的index.android.bundle文件，使用google-diff-match-patch对比两个文件，并生成差异补丁文件。app下载补丁文件，再使用google-diff-match-patch和assets目录下的初始版本合并，生成新的