Ubuntu進行 React-Native 的開發

嘗試在　Ubuntu 14.04　上面進行 react-native 的開發, 安裝官方文檔進行配置,記錄配置流程

安裝 node.js

在官網下載源碼安裝即可, 安裝後查看版本

$ node -v

安裝 watchman

文檔

安裝依賴

$ sudo apt-get install autoconf  automake python-dev

安裝 watchman, 如果出錯, 查看安裝依賴的詳細文檔

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.3.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

安裝 react-native

$ npm install -g react-native-cli

創建react-native 項目

$ react-native init AwesomeProject

運行

啓動 server, 如果沒有啓動server , 會報錯 React Native: ReferenceError: Can't find variable: require (line 1 in the generated bundle)

$ react-native start  

編譯apk,並運行到模擬器, 需要配置好Android開發的環境變量(ANDROID_HOME, GRADLE_HOME )

$ react-native run-android

做一些修改

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
         Hanks,  Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.reply}>
         Yep, I do!
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var 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,
  },
  // 添加style
  reply:{
      color: '#e8801b',
      fontSize: 20
  }
});

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

再次reload js, 可以通過菜單調出選項

＞文章出處: http://hanks.xyz