Ubuntu进行 React-Native 的开发

àì夳堔傛蜴生んèń 2022-08-18 15:19 36阅读 0赞

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

## 安装 node.js ##

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

$ node -v

## 安装 watchman ##

[文档][Link 3]

安装依赖

$ 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][Android 1]

＞文章出处: [http://hanks.xyz][http_hanks.xyz]

[Link 1]: https://facebook.github.io/react-native/docs/getting-started.html
[Link 2]: https://nodejs.org/en/
[Link 3]: https://facebook.github.io/watchman/docs/install.html
[react-native start]: https://dn-coding-net-production-pp.qbox.me/8cc2616a-d10b-4367-a093-9982589d1a27.png
[Android]: https://dn-coding-net-production-pp.qbox.me/a97d02dc-4546-47e4-899a-644390e87352.png
[Android 1]: https://dn-coding-net-production-pp.qbox.me/0028d35c-c502-49ba-8994-c04c3c5ad6aa.png
[http_hanks.xyz]: http://hanks.xyz