Ubuntu进行 React-Native 的开发

尝试在　Ubuntu 14.04　上面进行 react-native 的开发, 安装官方文档进行配置,记录配置流程

安装 node.js

在官网下载源码安装即可, 安装后查看版本

1
$ node -v

安装 watchman

文档

安装依赖

1
$ sudo apt-get install autoconf  automake python-dev

安装 watchman, 如果出错, 查看安装依赖的详细文档

1
2
3
4
5
6
7
$ 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

1
$ npm install -g react-native-cli

创建react-native 项目

1
$ react-native init AwesomeProject

运行

启动 server, 如果没有启动server , 会报错 React Native: ReferenceError: Can't find variable: require (line 1 in the generated bundle)

1
$ react-native start

react-native start

编译apk,并运行到模拟器, 需要配置好Android开发的环境变量(ANDROID_HOME, GRADLE_HOME )

1
$ react-native run-android

Android

做一些修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * 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, 可以通过菜单调出选项

Android

＞文章出处: https://hanks.xyz