[新手提问前先来这里看看]React Native的常见问题



  • 新手们请务必先仔细再仔细地阅读文档

    一般问题

    Q:RN和React.js是一个东西吗?

    A:RN和React.js共用一些抽象层,但具体有很多差异,且目标平台不同:RN目前只能开发iOS/Android App,而React.js用于开发web页面。


    Q:RN有哪些已经上架的案例?

    A:官方有一个showcase页面。


    Q:RN可以在windows下开发吗?

    A:对于iOS开发,可以通过虚拟机或黑苹果等方式,但很麻烦也不推荐。做iOS开发,迟早你都需要一台Mac电脑。

    对于Android开发,理论上没问题。但由于FB的员工基本都用mac,没有怎么管过windows兼容性,所以目前的版本可能在windows上会遇到一些问题。

    具体搭建方法请参考官方文档以及@天地之灵 总结的完整的windows环境搭建指南


    Q:RN所支持的最低iOS和Android版本?

    A:Android >= 4.1 (API 16)

    iOS >= 9.0

    将来可能有所变动,请查看官方github仓库的说明 https://github.com/facebook/react-native


    Q:RN和cordova/phonegap是一个东西吗?

    A:不一样。RN不是一个webview(但包含了webview组件),不能直接复用web页面代码。RN的性能接近原生,超过cordova/phonegap。


    Q:可以使用现有的js库吗?

    A:由于RN理论上更接近nodejs的运行环境,所以对nodejs的库兼容更好一些。浏览器端的js库,涉及到DOM、BOM、CSS等功能的模块无法使用,因为RN的环境中没有这些东西。


    Q:可以使用现有的objc/swift/java库吗?

    A:可以,但需要参照这篇文档这篇文档进行修改。


    Q:可以热更新吗?苹果允许吗?

    A:官方没有提供热更新方案,但本站推出了完整的热更新方案,差异更新只需极小流量。苹果目前的政策明确允许基于javascriptCore的热更新。但实际操作中不能在审核期间开启热更新功能,否则会被打回。


    环境搭建与编译问题

    Q:创建新项目,react-native init AwesomeProject命令长时间无响应,或报错shasum check failed

    A:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    

    另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。


    Q:运行react-native run-android时报错,报错信息中含有Could not find tools.jar等字样

    A:重装JDK1.8,注意目前不能使用更高版本


    Q:运行react-native run-android时报错,报错信息中含有SDK location...ANDROID_HOME等字样

    A:请对照官方文档,配置ANDROID_HOME环境变量。


    Q:运行react-native run-android时报错,报错信息中含有bintray.comgradle.org等网址

    A:请(强力)科学上网,反复再反复地重试。


    Q:运行react-native run-android时报错,报错信息中含有not found:gitandroid-23Build Tools revision x.x.xappcompat-v7等字样

    A:请对照官方文档以及@天地之灵 总结的完整的windows环境搭建指南仔细检查漏装的依赖项!(没错,再说一遍,要装全文档里提到的东西,,以及选择对应的版本号!)。


    Q:运行react-native run-android时报错,报错信息中含有No connected devices!字样

    A:既然是没有connected devices,那你就connect一个device咯!(usb连上真机,或启动一个模拟器)。


    Q:应该使用什么IDE开发?

    A:@tdzl2003: 有几个选择:
    1.VS Code,微软出的开源跨平台编辑器,适用于编写web代码,也可以用于编写ReactNative项目。插件强大,有调试功能。

    1. Sublime,虽然会不断提示你是否要购买,然而根据用户协议可以无限期试用。插件系统非常强大,因此如果愿意折腾的话,是个非常不错的选择。
    2. WebStorm,需要付费购买(学生党可凭edu邮箱在此申请免费授权
    3. nuclide(网页国内无法打开),facebook发布的基于atom的IDE,对flow语法支持非常好。

    另外虽然主要的业务逻辑是使用js开发,但仍然要依赖于原生的编译/调试环境,所以你还需要同时安装Xcode(iOS)或Android Studio(android)等。


    开发与调试问题

    Q:如何开启调试功能?

    A:点击iOS模拟器顶部的Hardware菜单,选择Shake Gesture(对应真机摇一摇),会自动弹出如下图的菜单。
    0_1450967966242_826615-967fd84e771b47f2.png
    安卓模拟器则是点击菜单键(对于不同的模拟器,其对应键位不同,实在不知道的,可以在命令行中运行adb shell input keyevent 82来触发),真机上没有菜单键的,摇一摇即可。

    选择Debug in Chrome即会启动Chrome作为运行和调试环境(注意此时JS引擎为Chrome的V8,与iOS真机的javascriptCore引擎存在一些差异)。选择Inspect Element即可以像调试网页元素一样查看布局元素的样式,但比较简陋。注意,Chrome的React Devtools插件已经不再支持React Native
    调试的相关文档点此


    Q:iOS模拟器突然变成了慢动作?

    A:iOS模拟器有个slow animation的选项,其快捷键是commant + T,调试过程中容易误碰到。再按一次关闭这个选项即可。


    Q:有一些示例代码中有奇怪的问号,比如function foo(x:?string),代表什么意思?

    A:这是通过一个名为flow的外部工具为javascript加上强类型检查的功能,不影响编译和运行。直接无视就好


    Q:报错:Adjacent JSX elements must be wrapped in an enclosing tag.

    A:render方法中必须只能包含一个根元素。


    Q:报错:Invariant Violation: onlyChild must be passed a children with exactly one child

    A:一般是Touchable开头的几个组件,如果没有子元素或者指定多个并列子元素都会报错。


    Q:如何获取服务器端数据/可以使用Ajax吗?

    A:可以用ajax,以及大部分现有的ajax库,而且不受浏览器跨域限制。官方推荐用更简单的fetch api来替代传统的ajax.但目前还无法在Chrome中直接观测请求的详情。


    Q:如何读写文件?如何调用摄像头?如何调用麦克风?等等

    A:React Native本身只是一个界面库,没有任何额外的能力。对于官方没有提供的组件或API,请自行在js.coachgithub中搜索第三方实现。如果搜不到相关结果,你只能考虑自己用原生代码实现后整合进来。


    Q:如何在原生代码中调用JS方法?

    A:请参阅这篇文档这篇文档还有这篇文档


已锁定