前言

筆者是一名 Android 開發(fā)者，之前沒有任何前端開發(fā)經(jīng)驗(yàn)，也是從0開始學(xué)習(xí)一些前端知識(shí)。有興趣的朋友可以和我一起學(xué)習(xí)，后續(xù)也會(huì)更新一些前端的學(xué)習(xí)筆記和自己的心得體會(huì)。

React Native 環(huán)境搭建

安裝

1. Homebrew, Mac 系統(tǒng)的包管理器，用于安裝 NodeJS 和一些其他必需的工具軟件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Node ,使用 Homebrew 來安裝 Node.js.

brew install node

3. React Native 的命令行工具

sudo npm install -g react-native-cli

4. Git，如果你已經(jīng)安裝過 Xcode，則 Git 也已經(jīng)一并安裝了。如若沒有，則使用下列命令安裝：

brew install git

5. 獲取 React Native 的源代碼和依賴包

react-native init AwesomeProject

這邊執(zhí)行這個(gè)命令的話會(huì)被墻，可以按下面的命令使用淘寶的鏡像去執(zhí)行。筆者親測(cè)，大概2分鐘創(chuàng)建項(xiàng)目完畢。

npm config set registry=http://registry.npm.taobao.org/

react-native init AwesomeProject

推薦安裝

1. Watchman，是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具

brew install watchman

2. Flow,是一個(gè)靜態(tài)的 JS 類型檢查工具

brew install flow

測(cè)試安裝

cd AwesomeProject

react-native run-android

這邊跑項(xiàng)目會(huì)遇到各式各樣的問題，我列舉一些我遇到的問題和解決方案
1.問題：提示 SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
解決方案：在創(chuàng)建的 AwesomeProject 下的 android 目錄下常見一個(gè) local.properties
文件，文件內(nèi)容加入

sdk.dir = /Users/USERNAME/Library/Android/sdk

其中 USERNAME 為你的用戶名
2.問題：提示 failed to find Build Tools revision 23.0.1
解決方案：打開 Android SDK，安裝 Build Tools revision 23.0.1
3.問題：手機(jī)運(yùn)行成功屏幕顯示紅色，提示沒有連接服務(wù)器 js Server
解決方案：搖一搖手機(jī)，點(diǎn)擊Dev Settings -> Debug server host for device ，填入你開發(fā)電腦的 IP 地址。
4.問題：手機(jī)運(yùn)行成功屏幕顯示紅色，提示 Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app
解決方案：我用了很多辦法都沒有成功，后來用系統(tǒng)6.0以上的手機(jī)就ok了
5.問題：手機(jī)運(yùn)行成功且出現(xiàn) Welcome to React Native！
解決方案：休息一會(huì)，恭喜你環(huán)境搭建成功了！！
第一個(gè) React Native 程序
打開目錄下的 index.android.js ，對(duì)代碼進(jìn)行相應(yīng)的修改

import React, { Component } from 'react';

import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';
?
export default class AwesomeProject extends Component {
 render() {
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Welcome to React Native!
       </Text>
       <Text style={styles.instructions}>
         JangGwa
       </Text>
       <Text style={styles.instructions}>
         一起從0開始學(xué)習(xí) React Native
       </Text>
     </View>
   );
 }
}
?
const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});
?
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

最后說一下如何調(diào)試，當(dāng)我們修改完代碼，不需要重新部署，如果是在真機(jī)上調(diào)試，可以搖一搖彈出菜單然后點(diǎn)擊 Reload；如果在虛擬機(jī)上可以按兩下 R 鍵進(jìn)行 Reload，也可以通過輸入命令adb shell input keyevent 82
彈出菜單。