React Native for Android 学习笔记(一) 操蛋的环境搭建与demo运行

前端之家收集整理的这篇文章主要介绍了React Native for Android 学习笔记(一) 操蛋的环境搭建与demo运行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@不得不说fb对于Android的文档支持和QA都太烂了。于是花了2个半小时才终于搭建好环境,跑起了demo,当然有可能是因为我没弄过node.js。

@H_403_0@

@H_403_0@坑我踩了,希望你们别踩了。

@H_403_0@

@H_403_0@我是在Mac下搭建的。Ubuntu差不多,Windows的话洗洗睡。

@H_403_0@

@H_403_0@1. 安装homebrew,别问我homebrew是啥

@H_403_0@
2. 安装Node.js:
2.1 安装nvm: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
或者用Wget : wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
2.2 安装node.js
nvm install node && nvm alias default node

@H_403_0@
3. 安装watchman和flow
3.1 watchman是一个监听文件变化的东东:brew install --HEAD watchman
3.2 flow是一个JavaScript的类型检查库brew install flow
找不到就先brew update一下。


4. 搞个Android的Demo
4.1 建立个文件夹。 mkdir react cd react
4.2 下载AwsomeProject
npm install -g react-native-cli
react-native init AwesomeProject
4.3 转成Android项目并跑起来
$ cd AwesomeProject
$ react-native run-android
4.4 别信fb教程,别瞎改index.android.js


5. 跑起来demo,踩坑雷区
react-native run-android


错误1: xxx Failed to find Build Tools revision 23.0.1
到AwesomeProject/android/app/src/build.gradle 文件里改一下compileSdkVersion和buildToolsVersion ,我的是"23.0.2"


错误2:Execution Failed for task ':app:lint'.
找不到lint,要在错误1文件里加一段
lintOptions {
abortOnError false
}

@H_403_0@
错误3:xxx unresolve xxxx……
改host文件, 192.168.0.1 本机名


会弹出个terminal,如果显示js server启动成功就表示至少环境ok了


跑起来以后,如果app显示如下的错误
错误1:react native android Failed to load JS bundle
错误2:ReferenceError: Can't find variable: __fbBatchedBridge


最最最蛋疼的两个错误


cd android/app/src/main
mkdir assets
然后:
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"


注意:保持js server 在running状态


然后看一下assets文件夹里有没有多一个bundle
有的话:
重新react-native run-android
一般就可以了。


如果还是不行,可以尝试:
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081
(注意:仅支持5.0以上Android系统环境(fuck!))

@H_403_0@
或者,用WiFi来链接,保证电脑与手机在同一网络环境下。
app里menu-server setting什么来着不记得了-输入本机地址,类似于192.168.1.30:8081
mac的本机地址在系统设置-网络里

原文链接:https://www.f2er.com/react/307154.html

猜你在找的React相关文章