html5/ReactNative（64）
react native环境搭建请移步：这里说说react native创建完成之后，运行中出现的常见问题，问题1：java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.这个是原因是工程找不到我们的android SDK。解决方法：在工程的根目录下的android文件下新建一个local.properties的文件（我们可以直接拷贝Android项目的local.properties的文件）。问题2：A problem occurred configuring project ':app'.&failed to find Build Tools revision 23.0.1这个是因为Build Tools revision 23.0.1和我们的sdk里面的版本不一致导致的。解决方法：这里注意build.gradle和gradle中gradle-wrapper.properties的对应关系。问题3Could not install the app on the device, read the error above for details.这个是因为未找到运行的设备解决方法：注意在运行命令：react-native run-android之前一定要确保手机已经连接上电脑。问题4com.android.ddmlib.InstallException: Failed to establish session这是小米手机调试的问题，我之前用魅族就没这问题解决方法：小米手机设置里-------开发者选项---------启用MIUI优化关闭问题5SyntaxError:Strict mode does not allow function declaration in a lexically nested。解决方案：打开RN项目目录下的InitializeCore.js进行修改，该文件路径为：你的RN项目\node_modules\react-native\Libraries\Core\InitializeCore.js
将112行改为：var handleError = function(e, isFatal) 问题6Could not connect to development server.来看一张图：大体意思是：连接不到开发的服务器。请按照以下的步骤来修复此问题：确保包服务器在运行确保你的设备或者模拟器连接着电脑，并且手机打开了USB调试模式，然后在cmd中运行adb devices来查看已经连接好的设备列表确保飞行模式是关闭的如果是使用真机来开发，输入 adb reverse tcp:8081 tcp:8081来检查设备输入IP：8081（这个大家都会）首先我是启动了服务的，并且打开了浏览器调试：http://localhost:8081/index.android.bundle?platform=android查看端口信息adb reverse tcp:8081 tcp:8081在没有的话可以打开dev Settings输入IP：8081调试就不多说了。问题7其他问题补充：Q：RN所支持的最低iOS和Android版本？A：Android &= 4.1 (API 16)iOS &= 7.0Q：RN和cordova/phonegap是一个东西吗？A：不一样。RN不是一个webview（但包含了webview组件），不能直接复用web页面代码。RN的性能接近原生，超过cordova/phonegap。Q：可以使用现有的js库吗？A：由于RN理论上更接近nodejs的运行环境，所以对nodejs的库兼容更好一些。浏览器端的js库，涉及到DOM、BOM、CSS等功能的模块无法使用，因为RN的环境中没有这些东西Q：如何升级RN版本？A：请用编辑器打开项目目录中的package.json，找到类似下面的一行配置&react-native&: &0.31.0&Q：应该使用什么IDE开发？A：虽然常用的JS编辑器很多，但由于RN大量使用jsx和es6语法，目前只有sublime text（通过插件）和webstorm（10以上版本）提供了良好的支持。笔者推荐webstorm，因为它有更完善的语法提示和补全。另外虽然主要的业务逻辑是使用js开发，但仍然要依赖于原生的编译/调试环境，所以你还需要同时运行Xcode（iOS）或Android Studio（android）等。Q：如何开启调试功能？A：点击iOS模拟器顶部的Hardware菜单，选择Shake Gesture（对应真机摇一摇），会自动弹出如下图的菜单。安卓模拟器则是点击菜单键，真机上没有菜单键的，摇一摇即可。选择Debug in Chrome即会启动Chrome作为运行和调试环境（注意此时JS引擎为Chrome的V8，与iOS真机的javascriptCore引擎存在一些差异）。选择Inspect Element即可以像调试网页元素一样查看布局元素的样式，但比较简陋。React Devtools插件可装可不装，它只用来查看布局，不影响调试，且在目前的版本（&0.13）中还无法正常加载。Q：使用ListView时报错：Sticky header index 0 was outside the range {...}A：看起来是个数组越界错误，但多数情况下是由于ListView的子组件渲染错误（如套数据时没有检查undefined等）引起，而非ListView本身的问题。Q：在使用Navigator的同时使用ListView或ScrollView，后两者的头部会多出一些空间。A：将automaticallyAdjustContentInsets属性设为{false}.
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：812198次
积分：13944
积分：13944
排名：第684名
原创：556篇
转载：267篇
译文：15篇
评论：176条
阅读：20447
阅读：13210
文章：20篇
阅读：43458
文章：19篇
阅读：31667
文章：48篇
阅读：73795
文章：25篇
阅读：24349
文章：20篇
阅读：24658
文章：13篇
阅读：23509
文章：19篇
阅读：40770
文章：83篇
阅读：131114
(32)(68)(35)(30)(37)(50)(26)(51)(16)(34)(24)(18)(7)(23)(15)(7)(22)(16)(4)(15)(8)(11)(7)(8)(6)(16)(15)(7)(8)(7)(22)(23)(14)(26)(12)(20)(27)(58)(2)React Native（22）
基于Android解决React Native项目启动时白屏问题
一、下载 react-native-splash-screen
在项目根目录打开终端运行
npm react-native-splash-screen --save
二、安装(自动安装或手动安装)
自动安装终端运行：
react-native link react-native-splash-screen或rnpm link react-native-splash-screen
1.在你的android/settings.gradle 文件中添加下列代码:
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
2.在你的android/app/build.gradle 文件中添加&:react-native-splash-screen：
代码如下：
dependencies {
compile project(':react-native-splash-screen')
3.更新你的MainApplication.java文件，如下:
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new MainReactPackage(),
new SplashScreenReactPackage()
//添加这一句
public ReactNativeHost getReactNativeHost() {
return mReactNativeH
1.更新你的MainActivity.java 文件如下：
public class MainActivity extends ReactActivity {
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
// 添加这一句
super.onCreate(savedInstanceState);
// ...other code
2.创建一个名为launch_screen.xml 的布局文件来自定义你的启动屏幕。
&?xml version=&1.0& encoding=&utf-8&?&
&LinearLayout xmlns:android=&/apk/res/android&
android:orientation=&vertical& android:layout_width=&match_parent&
android:layout_height=&match_parent&
android:background=&@drawable/launch_screen&&
&/LinearLayout&
3.在.js文件的启动页中
import SplashScreen from 'react-native-splash-screen'
然后在componentDidMount中调用Splash.hide().
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：21048次
排名：千里之外
原创：54篇
转载：22篇
(5)(6)(3)(7)(5)(4)(1)(1)(5)(3)(3)(4)(4)(8)(1)(1)(1)(2)(2)(2)(1)(1)(1)(2)(1)新手入门react-native（一）-- 运行第一个helloworld - 简书
新手入门react-native（一）-- 运行第一个helloworld
本人是做Android出生的，一开始接触react-native 还是有点抵触心里的；觉得还不太成熟，怕用到实际项目中会出问题，反正也就是有一系列顾虑。但是，当真正接触到了react-native，一开始写法上觉得很别扭，这可能就jsx的语法和Android的差别导致的，后来在慢慢爬坑的过程中，自己有了一些新的感触和理解，这篇文章作为第一篇，后续将不断更新，希望能帮助大家跳过我走过的坑，走得更快更稳！第一步：准备工作（windows环境下）1.官方推荐安装Chocolatey，它是一个在windows上的包管理器，具体命令为：@powershell -NoProfile -ExecutionPolicy Bypass -Command"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。译注：chocolatey的网站可能在国内访问困难，导致上述安装命令无法正常完成，请使用稳定的翻墙工具如果安装不上，也没关系，接着往下看：2.安装python官方说安装python2版本，但本人亲测python3版本在win7上也是可以跑起来的可以去官网下载 https://nodejs.org/en/ ，下载推荐版的即可。3.安装node/ 可以到这里下载稳定版本即可
4.安装Android studio，版本为2.0或者更高http://www.android-studio.org/ 这里是Android studio中文社区的地址，你可以下载推荐版的，里面自带相应的sdkjdk版本需要1.8或者更高，你可以在命令行中输入javac -version来查看当前安装的jdk版本来决定是否要更新。
关于Android studio安装
安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager。
在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）
关于sdk环境变量的配置和adb工具的环境变量配置：ANDROID_HOME环境变量确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。打开控制面板-&系统和安全-&系统-&高级系统设置-&高级-&环境变量-&新建（注：请选择自己的sdk路径填写！）
adb工具的环境变量，将adb所在路径加入到path中即可
到这里，必须的准备工作基本OK，让我们新建一个react-native工程吧！打开cmd窗口，进入你想创建工程的目录，运行命令：react-native init xxx
其中xxx就是你想要的工程名，自己随便取就可以然后等待工程init成功，然后就可以进入xxx下，运行react-native run-android/ios，就可以运行起来工程了。当然，你必须要有真机或者模拟器，模拟器可以使用Android studio自带的模拟器，怎么使用自行百度，比较简单；使用真机的话，如果你的Android版本是5.0以上的，那省事，连上电脑，进入debug模式就可以；如果是5.0以下，那么还要设置ip还端口号（默认8081）连接上真机（5.0以下），在xxx目录下cmd中输入react-native run-android,运行完之后可以看到真机会出现红屏报错，这是正常的，因为还没有设置ip和端口号在命令行输入adb shell input keyevent 82会调出菜单，选择Dev Settings --& debug server host & port for device，输入本机的ip：8081windows上ip获取：ipconfig
mac上：ifconfig | grep "inet"
| grep -v 127.0.0.1
到这里，一个Android平台的react-native工程就试跑成功了！IOS平台的环境搭建（注意：开发ios必须要mac系统才可以！）可以参考中文网的教程即可：/docs/0.39/getting-started.html有什么问，可以在文章下留言，本人会尽力解答！下一篇：07:49:26 UTC
每次运行react-native start，最终都会报错Error: Watcher took too long to loadTry running watchman version from your terminal我的系统是windows，我看官方文档里并没有让我安装watchman（似乎仅OS X需要？）
还有在启动APP后出现红屏，摇晃真机设置过IP地址后，依旧报错：
E/unknown:React(24225): Unable to download JS bundle
E/unknown:React(24225): java.io.IOException: Unexpected response code: 404
各位已入门的兄弟姐妹们，伸出你们的援助之手，帮帮这个可怜的孩子吧~~！我究竟犯了什么错，不让我入门（开玩笑滴
Edit：另外附上修改IP后的具体错误日志：
12-31 15:00:23.698: E/unknown:React(24225): Unable to download JS bundle
12-31 15:00:23.698: E/unknown:React(24225): java.io.IOException: Unexpected response code: 404
12-31 15:00:23.698: E/unknown:React(24225):
at com.facebook.react.devsupport.DevServerHelper$1.onResponse(DevServerHelper.java:191)
12-31 15:00:23.698: E/unknown:React(24225):
at com.squareup.okhttp.Call$AsyncCall.execute(Call.java:168)
12-31 15:00:23.698: E/unknown:React(24225):
at com.squareup.okhttp.internal.NamedRunnable.run(NamedRunnable.java:33)
12-31 15:00:23.698: E/unknown:React(24225):
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)
12-31 15:00:23.698: E/unknown:React(24225):
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)
12-31 15:00:23.698: E/unknown:React(24225):
at java.lang.Thread.run(Thread.java:841)
05:19:14 UTC
问题已经解决了哈~参考这个链接中的方法：/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83
对于window下的watchman version错误提示，可以增大node_modules/react-native/packager/react-packager/src/FileWatcher/index.js中的MAX_WAIT_TIME 值（我修改成了250000）。
另外在使用5.0以下真机调试时，需要设置IP，地址为设备所连接电脑所在的无线局域网下的ip加端口8081（需在命令行中启动js server）
08:39:11 UTC
你好为什么我用4.4的虚拟机调试还是报跟你一模一样的错误呢。就算设置了IP也是不行react-native start也已经起来了。
09:14:39 UTC
这个方法似乎只对真机有效，因为需要保证设备和电脑是连入同一局域网的。虚拟机不确定wifi是否启用了我在家里配置环境的时候，电脑连的是有线网络，也出现过红屏。我现在调试的时候都是在电脑上安装一个无线wifi来调试的
09:15:58 UTC
那你用虚拟机调试成功过吗，谢谢
09:19:03 UTC
这个还没有试过，因为电脑太渣，哈哈不过毕竟最终是在android上开发，弄个真机来开发还是好点
23:45:18 UTC
好的谢谢，因为公司的是台式电脑，所以没去弄WIFI