React Native入门 开发第一个React Native应用

1. 首先创建一个目录（比如ReactNativeDir），用于存放各个ReactNative工程的代码

2.使用React Native命令工具来创建（初始化）一个ReactNative项目(test)：

react-native init test

使用Atom打开test项目，可以看到有 如下几个重要目录/文件：

目录/文件	说明
__test__	单元测试文件夹
android	原生Android工程文件夹
ios	原生IOS工程文件夹
node_modules	依赖的第三方库目录
index.android.js	Android App的入口文件
index.ios.js	IOS App 的入口文件
package.json	React Native的工程配置问价

 

 

首先通过Android Studio，运行模拟器或Android手机（这里打开的是模拟器）

执行

adb devices

找到对应的设备号

再执行（此时终端当前目录为test）

react-native run-android emulator-5554

 

编译完成并应用安装入模拟器后，可在模拟器中看到如下画面：

 

，由此我们的第一个应用就执行成功了，但还没有写过一行代码，现在尝试修改这个界面。

修改app.js 的render()函数

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        {/* grady add begin */}
        <Text style={styles.welcome}>
            你好，这是我的第一个RN程序
        </Text>
        {/* grady add end */}
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }

可以看到以下的界面：

 

新的元素就添加成功了