React Native 我的那些坑

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

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

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

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

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

二、navigation

(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目录下的初始版本合并,生成新的

### React Native WebRTC 常见问题及解决方法 在使用 React Native WebRTC 构建实时通信应用时,开发者可能会遇到一些常见的问题。以下是这些问题及其解决方案的详细说明: #### 1. **信令服务器连接失败** 当尝试通过信令服务器进行设备间通信时,可能会出现连接失败的问题。这通常是由于信令服务器配置不正确或网络问题引起的。 - 确保信令服务器已正确启动并监听指定端口。 - 检查客户端代码中提供的信令服务器地址是否正确。 - 如果使用的是在线演示服务器(如 https://react-native-webrtc.herokuapp.com/),确保其服务可用[^4]。 ```javascript // 示例:连接信令服务器 const signalingServer = 'wss://your-signaling-server-url'; const socket = new WebSocket(signalingServer); ``` #### 2. **摄像头权限被拒绝** 在某些情况下,应用程序可能无法访问设备摄像头,导致视频流无法正常工作。 - 在 Android 和 iOS 平台上分别检查是否已在 `AndroidManifest.xml` 和 `Info.plist` 文件中添加了必要的权限声明。 - 确保在运行时请求用户授予摄像头权限。 ```xml <!-- AndroidManifest.xml --> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> ``` ```xml <!-- Info.plist --> <key>NSCameraUsageDescription</key> <string>We need access to your camera for video calls.</string> <key>NSMicrophoneUsageDescription</key> <string>We need access to your microphone for audio calls.</string> ``` #### 3. **音频输入设备不可用** 有时音频输入设备(如麦克风)可能无法正常工作。 - 确认设备上是否有其他应用程序占用麦克风资源。 - 检查是否正确初始化了音频轨道。 ```javascript // 示例:初始化音频轨道 navigator.mediaDevices.getUserMedia({ audio: true, video: false }) .then(stream => { const audioTrack = stream.getAudioTracks()[0]; console.log('Audio track initialized:', audioTrack); }) .catch(error => { console.error('Error accessing audio device:', error); }); ``` #### 4. **视频画面显示异常** 如果视频画面无法正常显示,可能是由于 RTCView 组件配置错误或媒体流未正确传递。 - 确保 RTCView 组件已正确绑定到媒体流。 - 使用 `zOrderMediaOverlay` 和 `zOrder` 属性调整视频层的显示顺序[^5]。 ```javascript // 示例:使用 RTCView 显示视频流 import { RTCView } from 'react-native-webrtc'; <RTCView streamURL={remoteStream.toURL()} style={{ width: 320, height: 240 }} zOrderMediaOverlay={true} /> ``` #### 5. **ICE 连接状态问题** 当 ICE(Interactive Connectivity Establishment)连接状态始终为 "disconnected" 或 "failed" 时,可能是由于 STUN/TURN 服务器配置不当。 - 确保提供了正确的 STUN 和 TURN 服务器地址。 - 检查防火墙设置是否阻止了相关流量。 ```javascript // 示例:配置 ICE 服务器 const configuration = { iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'turn:your-turn-server', username: 'user', credential: 'password' }, ], }; ``` #### 6. **跨平台兼容性问题** React Native WebRTC 可能在不同平台上表现出不同的行为。 - 在 iOS 和 Android 上分别测试应用程序,确保功能一致性。 - 如果需要更高的兼容性,可以考虑从 `react-native-webrtc-web-shim` 库中导入相关类和方法[^5]。 ```javascript // 示例:从 react-native-webrtc-web-shim 导入 import { RTCPeerConnection, RTCIceCandidate, RTCSessionDescription } from 'react-native-webrtc-web-shim'; ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值