2016-03-31

React Native入门及一些问题处理

Node.js环境安装

Reacty Native CLI安装

1	npm install -g react-native-cli

开始项目

1	react-native init TestApp

mac下需要安装brew，安装watchman，安装flow。win下可忽略
项目目录下运行

npm start

打开ios/TestApp.xcodeproj、AndroidStudio打开android目录，待IDE加载完成后（此时要等Android Studio）点击运行按钮（此时要等Xcode），可运行模拟器
有一个问题

1	Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Holo.Light.ActionButton'.

解决方式为:
引入android-support-v7-appcompat(在sdk下)，project.properties里面的 target=android-10 改为 target=android-21(编译器版本过低) 并设置AndroidManifest.xml里面的uses-sdk android:minSdkVersion=”7” 并进行clean。

##使用纯命令行安装的问题集锦
创建项目后在命令窗口调用 react-native start，启动服务,在浏览器访问http://localhost:8081/index.android.bundle?platform=android 这个基本没有什么问题。

1 运行react-native run-android 出现异常：

1
2
3

A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugCompile'.
> Could not find com.android.support:appcompat-v7:23.1.1.

解决方案：安装Android Support Repository与Android Support Library。win下需使用Android SDK将各个版本的api工具进行安装(大部分报错与这些版本相关)。另外需要将support lib里面的一个maven工具包进行安装，这个会导致Could not find com.android.support:appcompat-v7:23.1.1.这个问题。表面上看是找不到这个版本的工具，其实修改后面的23.1.1. 这个版本号一点作用都没有，只能说奇葩谷歌工具包啊。这里要吐槽一下android sdk。尼玛一个东西升级了导致其他一堆东西不能用，这也太扯淡了吧。能考虑一下代码狗的感受吗！！！！

另外也可以不run-android而只是进行apk的打包，打包命令为:gradlew assembleRelease 打包碰到的问题和run-android一样需要进行排查。另外gradle配置文件的加载需要依赖网络下载。所以需要一个网路畅通的网络。

2 打包的apk在安卓机上不能安装，这个问题也比较扯淡。在项目目录下\android\app\build.gradle 文件有几个配置项目

compileSdkVersion 23
buildToolsVersion "23.0.1"

defaultConfig {
    applicationId "com.jdapp"
    minSdkVersion 16
    targetSdkVersion 22
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}

这里的compileSdkVersion和buildToolsVersion改了都会导致报错。targetSdkVersion才是打包好的apk适用的安卓版本。所以要把targetSdkVersion版本数改低。

3 apk在手机上安装好了但是不能使用

打开app出现红色界面并报错ReferenceError: Can’t find variable: require(line 1 the generated bundle)。需要摇动手机在Dev Settings -> Debug server host & port for device里面输入pc的ip:端口。并使用adb工具输入命令adb reverse tcp:8081 tcp:8081 所有问题都解决了，app跑起来了。后面终于可以写react native应用了！！！

IOS app开发的问题处理

包重复删除重复的依赖包即可

1
2

Error building DependencyGraph:
 Error: Naming collision detected: /Users/rainzhai/workspace/ReactApp/node_modules/react-web/node_modules/fbjs/package.json collides with /Users/rainzhai/workspace/ReactApp/node_modules/react-native/node_modules/fbjs/package.json

Could not connect to development server. AppDelegate.m中的jsCodeLocation 改为自己本机IP地址就可

https://github.com/facebook/react-native/issues

宅鱼

部落格