React Native 初探

1、开发环境搭建

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

2、安装genymotion

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

启动一个android虚拟机。使用adb devices可以查看能连接的设备。

3、创建项目

react-native init MyReactNativeProject
cd MyReactNativeProject

4、运行react-native程序

react-native run-android

第一次运行耗费时间较长。而且可能出错。比如可能因为缺失android sdk某个指定的版本而报错（在sdk manager中装上就可以解决）。

也可能遇到这样的错误：

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

解决办法有：
1、使用adb install 把apk安装。
2、参考 http://csbun.github.io/blog/2015/12/starting-react-native-with-android/ 修改配置文件里的gradle版本号。

5、代码结构

我们在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，得到：

6、调试

方法1、

浏览器打开 http://localhost:8081/debugger-ui ：

红线圈住的是点击app的按钮后触发的代码，也就是上面代码中的：

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

方法2、
在项目目录下执行：

react-native log-android

可以看到打印出的日志。

更多请参考 http://reactnative.cn/docs/0.31/debugging.html 。