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