本章节主要介绍
- 开发环境搭建
- 第一个程序（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分发到手机端，手机端进行渲染。
具体文档请点击这里
