React Native 初探

一、開發環境搭建

http://reactnative.cn/docs/0.31/getting-started.html

二、安裝genymotion

https://www.genymotion.com/download/

啓動一個android虛擬機。使用adb devices能夠查看能鏈接的設備。

三、建立項目

react-native init MyReactNativeProject
cd MyReactNativeProject

四、運行react-native程序

react-native run-android

第一次運行耗費時間較長。並且可能出錯。好比可能由於缺失android sdk某個指定的版本而報錯（在sdk manager中裝上就能夠解決）。

也可能遇到這樣的錯誤：

com.android.ddmlib.InstallException: Unable to upload some APKs

解決辦法有：
一、使用adb install 把apk安裝。
二、參考 http://csbun.github.io/blog/2015/12/starting-react-native-with-android/ 修改配置文件裏的gradle版本號。

五、代碼結構

咱們在index.android.js中再添加一些內容：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableHighlight
} from 'react-native';

class MyReactNativeProject extends Component {

  _onPressButton() {
    console.log("You tapped the button!");
  }
  render() {

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={styles.container}>
        <Image source={pic} style={{width: 193, height: 110}} />

        <Image source={require('./img/test.jpg')} style={{width: 193, height: 110}} />

        <Text style={styles.welcome}>
          Hi
        </Text>        
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
        <Text style={styles.red}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>

        <TouchableHighlight onPress={this._onPressButton}>
          <Text>Button</Text>
        </TouchableHighlight>
        
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
        />

      </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,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('MyReactNativeProject', () => MyReactNativeProject);

再次運行react-native run-android，獲得：

六、調試

方法一、

瀏覽器打開 http://localhost:8081/debugger-ui ：

紅線圈住的是點擊app的按鈕後觸發的代碼，也就是上面代碼中的：

_onPressButton() {
    console.log("You tapped the button!");
  }

方法二、
在項目目錄下執行：

react-native log-android

能夠看到打印出的日誌。

更多請參考 http://reactnative.cn/docs/0.31/debugging.html 。