React Native,第一个Hello word程序

在上一篇博客中，介绍了React Native的环境搭建。搭建好后，下面开始第一个程序，Hello word程序(开发环境:windows 7)

1.使用android studio新建一个项目,注意项目要在android目录下面(原因是在此目录下最后执行命令react-native run-android才能跑起来,否则的话报错Android project not found. Maybe run react-native android first?)

2.项目配置。参考自己搭建环境运行起来的程序里面的文件。

下面是我上篇博客中搭建环境成功时跑的一个项目

本次Hello word程序也仿照这么写。

最后在清单文件中加一个访问网络的权限 <uses-permission android:name="android.permission.INTERNET" />

3.JS需要的配置

在上一片博客中，正常的react native(android)项目还有这样几个文件

下面来一一生成

 3.1生成package.json文件

在根目录下面执行npm init      （name注意小写，其他的直接回车即可）

将上一片博客中的项目里package.json文件里的一些内容拷到我们的package.json文件里

我这里拷贝了start和dependencies(注意json文件格式，注意逗号)，保存

 3.2生成node_modules目录

在根目录执行npm install命令(或者直接拷贝node_modules目录也是可以的)

注： http://blog.csdn.net/fangfanggaogao/article/details/51508441    npm install命令报错的话参考这篇博客

运行成功后生成了node_modules目录

4.在根目录下创建index.android.js文件

并添加下面代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class myrn extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    );
  }
}

const 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,
  },
});

AppRegistry.registerComponent('helloword', () => myrn);

5.flow配置

curl -o .flowconfig  https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

做一下flow配置

注:curl命令执行出问题，下载curl工具 ，配置一下环境变量即可

6.最后在根目录执行命令react-native run-android命令就可以了

注意:package.json文件里的name值，index.android.js里的AppRegistry.registerComponent()方法的第一个参数,MainActivity里getMainComponentName()方法的返回值要一样,我这里写的都是helloword