zoukankan      html  css  js  c++  java
  • ReactNative学习笔记(一)环境搭建

    前言

    本文开发环境为Windows,目标平台为Android,react-native版本为0.35.0

    环境搭建

    注意,本文不是按照官网的教程来的,官网说必须安装什么Chocolatey,我懒得鸟它。

    安装前请准备以下环境:

    • jdk(必须1.8或更高版本)
    • node.js & npm
    • python2(注意不支持python3,我的是2.7)
    • android sdk(并且已经配置好相关环境变量)

    首先安装react-native-cli

    npm install -g react-native-cli
    

    然后我们新建一个helloworld项目,连上你的手机:

    cd 你的工作目录
    react-native init helloworld
    cd helloworld
    react-native run-android
    

    不出问题的话,一个ReactNative的HelloWorld项目就已经成功运行你的手机上了,
    生成的apk在helloworldandroidappuildoutputsapk目录下。

    HelloWorld运行效果如下:

    W303xH184

    但是!

    我估计一般人都不会这么一帆风顺!继续往后看!

    启动和运行

    如果平时只是修改一些js和图片,没有重新编译需求的话,只需要执行react-native start启动packager,然后手动打开apk,这种方式更快。react-native run-android则会先重新打包应用,然后启动packager,最后启动你的应用,比较慢。

    可能碰到的几个错误

    failed to find Build Tools revision 23.0.1

    在执行react-native run-android时你可能报如下错误:

    failed to find Build Tools revision 23.0.1
    

    打开Android SDK目录,发现没有安装23.0.1:

    W446xH163

    打开helloworldandroidappuild.gradle文件,将buildToolsVersion从23.0.1改为23.0.2:

    android {
    	compileSdkVersion 23
    	buildToolsVersion "23.0.2"
    }
    

    再次重新运行react-native run-android应该就没问题了。

    当然你也可以启动SDKManager下载安装Build Tools revision 23.0.1

    启动后白屏,控制台报错

    不知为何,我碰到的情况是,apk已经输出成功了,安装到4.4的模拟器时没有任何问题,能够正常启动,但是安装到手机时(LG-G3,刚刷机成MIUI7,Android4.4系统)却提示如下错误:

    10-14 14:18:33.647 6526-6526/com.helloworld E/unknown:React: Exception in native call
    	java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly
    	at com.facebook.react.cxxbridge.CatalystInstanceImpl.loadScriptFromAssets(Native Method)
    	at com.facebook.react.cxxbridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:33)
    	at com.facebook.react.cxxbridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:177)
    	at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:918)
    	at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:911)
    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:74)
    	at android.os.Handler.handleCallback(Handler.java:733)
    	at android.os.Handler.dispatchMessage(Handler.java:95)
    	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
    	at android.os.Looper.loop(Looper.java:136)
    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
    	at java.lang.Thread.run(Thread.java:841)
    

    其中,关键错误信息是:

    Could not get BatchedBridge, make sure your bundle is packaged correctly
    

    解决办法:定位到helloworld根目录,执行如下命令:

    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
    

    运行截图:

    W661xH430

    这一步会在android/app/src/main/assets/下面生成index.android.bundleindex.android.bundle.meta这2个文件,然后再次运行应该就没问题了。

    参考

    react-react-native-的es5-es6写法对照表
    React Native官方指南

  • 相关阅读:
    【POJ 3162】 Walking Race (树形DP-求树上最长路径问题,+单调队列)
    【POJ 2152】 Fire (树形DP)
    【POJ 1741】 Tree (树的点分治)
    【POJ 2486】 Apple Tree (树形DP)
    【HDU 3810】 Magina (01背包,优先队列优化,并查集)
    【SGU 390】Tickets (数位DP)
    【SPOJ 2319】 BIGSEQ
    【SPOJ 1182】 SORTBIT
    【HDU 5456】 Matches Puzzle Game (数位DP)
    【HDU 3652】 B-number (数位DP)
  • 原文地址:https://www.cnblogs.com/liuxianan/p/react-native-1.html
Copyright © 2011-2022 走看看