Ubuntu进行 React-Native 的开发

来源：互联网发布：看图软件acdsee9.0 编辑：程序博客网时间：2024/05/21 11:18

尝试在　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

react-native start

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

$ react-native run-android

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, 可以通过菜单调出选项

Android

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

0 0