本章节主要介绍

• 开发环境搭建
• 第一个程序（Hello World）

配置开发环境

根据React Native中文网的教程配置开发环境

新建项目

react-native init AwesomeProject

运行

cd AwesomeProject
react-native run-android

运行效果

第一个程序 Hello World

写代码

将以下代码写到App.js文件里面

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Hello, world!</Text>
        </View>
    );
  }
}

Reload

摇一摇安卓手机，出现菜单，点 Reload。App.js修改的内容瞬间就被加载到手机中展现出来了。

菜单

Hello World

原理

在执行react-native run-android的时候，电脑会启动一个node服务，端口为8081。手机端点Reload的时候，会请求这个node服务，node服务会将变化的文件打包成bundle分发到手机端，手机端进行渲染。

具体文档请点击这里