react native 的坑


按照http://reactnative.cn/docs/0.46/getting-started.html#content提供的步骤一步一步地来,也会出错,现在记录一下遇到的坑


1、运行iOS,报错  Print: Entry, ":CFBundleIdentifier", Does Not Exist

  a.尝试reset一下模拟器之后再,react-native run-ios

     点击模拟器Simulator,里面有Reset Content and Settings

   b. 新建指定项目版本,目前最新版本是0.46

react-native init myapp --version 0.44.3

2、创建项目时提示:Failed to downloadhttps://yarnpkg.com/latest.tar.gz

里面还有一句: Consider installing yarn to make this faster:https://yarnpkg.com

在终端输入命令:npm install -g yarn 

安装后查看版本:yarn --version,然后再重新创建项目即可

3、运行Androidreact-native run-android提示:“Could not install the app on the device, read the error above for details.

Make sure you have an Android emulator running or a device connected and have

set up your Android development environment:https://facebook.github.io/react-native/docs/android-setup.html

打开Android SDK Manager,确保如下工具和开发包已经安装:

SDK

  • Android SDK Build-tools version 23.0.1
  • Android 6.0(API 23)
  • Android Support Repository

模拟器:

  • Intel x86 Atom System Image(for Android 5.1.1 - API 22)
  • Intel x86 Emulator Accelerator(HAXM installer)

4、链接RCTCameraRoll库时,报错:error Couldn't find package "RCTCameraRoll" on the "npm" registry

1.npm install RCTCameraRoll --save

2.XCode打开项目,在Libraries文件夹右击-Add Files,在出来的文件选择中选择node_modules/RCTCameraRoll/这个文件夹,找到RCTCameraRoll.xcodeproj这个文件,并添加

3.选择Build Phases中的Link Binary With Libraries中添加libRCTCameraRoll.a



5、报错,-bash: adb: command not found 


参考:http://blog.sina.com.cn/s/blog_540316260101ftge.html


6.

Execution failed for task ':app:installDebug'.

> com.android.builder.testing.api.DeviceException: No connected devices!

就是没有能连接的设备,我的是mac系统的,就需要装一下genymotion,教程

http://blog.csdn.net/iosbird/article/details/76231570


后续待更。。。。。

### 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'; ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值