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 。