一.搭建环境
在搭建环境这一环节，可能会遇到一些陌生的步骤、指令、配置和没有使用过的工具。面对此种情况，建议先不必深究，按文档走一遍，在搭建过程中先有个大概了解，期间如果遇到文档上没有的问题，可通过查询一些博客或者网站，在解决问题的过程中，能够加深对安装过程的理解。
1.官方文档中对环境搭建有详细的指引，严格按照文档一步步搭建，并尝试在模拟器上运行。
2.针对自己的开发平台(macOS，Windows，Linux)，都需安装两个目标平台(iOS，Android)。
3.RN项目可通过终端指令的方式运行(react-native run-ios/react-native run-android)。也可以通过原生开发工具(Xcode / Android Studio等)运行。
4.选择一个自己顺手的编辑器。个人目前使用WebStorm。
二.创建项目
在写项目之前，先了解RN项目的目录结构和入口文件，再看一下package.json 和node_modules在项目中的作用。没有开发过iOS和Android的同学也不必为看不懂ios和android文件夹苦恼，在后面的开发中，会逐渐接触并了解。
1.使用 React Native 命令行工具来创建新项目：
react-native init 项目名
2.初始目录结构如下
项目根目录
|___android/ Android工程文件夹
|___ios/ iOS工程文件夹
|___node_modules/ RN依赖库文件夹
|___package.json 打包脚本，依赖库版本管理文件
|___yarn.lock 依赖库lock文件
|___app.json app信息文件
|___index.js RN项目入口文件
|___App.js 项目文件
项目目录
3.入口文件内容
// step 1.引入RN的注册组件API
import { AppRegistry } from 'react-native';
// step 2.引入项目根组件
import App from './App';
// step 3.注册项目根组件
AppRegistry.registerComponent("LearnRN", () => App);
三.页面怎么写
知道了项目是由哪里开始的，接下来的关键是了解页面是怎么渲染出来的，因为当我们看到代码的改动直接映射到界面上的变动时，能够更直观地学习RN的使用。这一步我会详细地讲解页面，这样可以帮助你快速清除疑惑。我们先清空App.js文件，再按下面的步骤熟悉页面的编写。
1.引入基本库和组件。
import React, {Component} from 'react';
import { View, Text } from 'react-native';
2.在RN中，页面是由“组件”搭建成的。我们先写一个最简单的页面。
export default class Page extends Component {
render() {
return (
这是一个最简单的页面
);
}
}
2.1 这段代码看呢，我们首先声明了一个类，它继承于Component，也就是他是一个组件。
2.2 组件中有个render()方法，我们的UI内容，都是通过这个render函数渲染的。
2.3 在render中我们有一个View，一个Text。可以通过React中文官方网站学习这种语法。
2.4 重新运行项目，或者reload。
展示1
可以看到模拟器上已经出现了我们写的内容，但是位置不太好。
3.样式
3.1 RN中采用和CSS基本相同的命名，使用JS来写样式。
首先引入样式api
import { ..., StyleSheet } from 'react-native';
然后在类的下方实现
const PageStyle = StyleSheet.create({
viewStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'black'
},
textStyle: {
color: 'white',
fontSize: 20
}
});
最后赋给组件
export default class Page extends Component {
render() {
return (
这是一个最简单的页面
);
}
}
reload，效果如下
展示2
3.2 这里我们使用了flex布局，简单的改动，不用坐标定位，也不用刻意指定约束。将Text居中展示，改变了View背景颜色，Text颜色及字体大小。
3.3 尝试在另一个平台运行。现在你的代码已经可以在iOS和Android上运行。
4.数据源
在项目的开发中，页面最重要的功能之一，就是数据的展示。比如我们要展示用户的基本信息：姓名，年龄。那么我们可以这样做：
在Page类的构造函数中，声明两个字段
...
constructor(props) {
super(props);
this.name = '李超';
this.age = 18;
}
...
然后在组件中使用这两个数据
render() {
return (
姓名：{this.name}
年龄：{this.age}
);
}
reload，效果如下
展示3
这样一来，我们就可以想象通过接口拿到用户信息，然后展示出来的过程了。
5.交互
页面最重要的功能之二，有了数据展示，就要处理用户与项目的交互。RN中有丰富的手势和组件都可以实现与用户的交互。比如为年龄Text增加一个点击事件，点击后，年龄+1。
render() {
return (
姓名：{this.name}
style={PageStyle.textStyle}
onPress={
() => {
this.age += 1;
}
}
>年龄：{this.age}
);
}
reload后，可以看到，当点击“年龄...”这行字时，有明显的点击效果。
但是年龄并没有变化，是age没有变化吗？我们打印一下。
...
onPress={
() => {
this.age += 1;
console.log(this.age, '点击后的age');
}
}
...
reload后，点击年龄Text，发现控制台中打印了
19, '点击后的age'
四.state
上面我们发现字段的值改变了，但是并没有体现在UI上。
在RN中，页面中最直接的数据源，可以影响UI的，是一个叫state的字段。
1. 首先我们把姓名和年龄放在state中
...
// 构造函数中
constructor(props) {
super(props);
this.state = {
name: '李超',
age: 18
};
}
...
2. 然后在组件中使用
render() {
return (
姓名：{this.state.name}
年龄：{this.state.age}
);
}
reload后，可以看到展示效果不变。
3. 在点击事件中更新年龄，更新state
...
style={PageStyle.textStyle}
onPress={ () => {
this.setState({
age: this.state.age += 1
});
}}
>年龄：{this.state.age}
...
reload，点击年龄Text，可以看到UI上出现了变化。
4. state的使用
组件中使用state来展示UI的，都会根据state的刷新而及时重新进行渲染。
state的使用注意不能通过this.state.name = xx进行更新，而需要使用setState()方法进行更新。
五.props
页面最重要的功能之三，传值。
每个组件都可以接收任意输入值，称之为props。也可以理解为，props是传值的一个手段。
1. 我们将刚刚的信息展示拆成一个组件。
function InfoComponent(props) {
return (
姓名：{props.name}
年龄：{props.age}
);
}
2. 然后修改Page类的render布局
render() {
return (
name={this.state.name}
age={this.state.age}
/>
);
}
reload，发现效果和此前是一样的。
3. props的使用
在这里我们现实封装了一个组件函数InfoComponent(props)，它接收一个props参数，然后返回了一个组件，在组件中使用了props中的字段。
而Page类中，我们使用了InfoComponent组件，并将state中的name和age传给了它。
这就是组件中props的传递和接收，它可以完成组件中的通信。
4. state和props
props和state，都可以影响UI，当props变化了，使用props的组件也会及时渲染。
六.页面跳转与页面传值
会写页面了，但是项目并不是一个页面构成的，而多个页面的跳转和传值，是学习新的框架初期很关注的。
RN有多个导航可以选择，有原生框架的，有RN实现的。
选择一个导航，查看他的文档。
七.组件和API的熟悉
RN提供了大部分组件和API，可以在官方网站找到详细的文档。
八.iOS管理RN
1.创建RN项目后，可以看到在iOS中，是以工程引用的形式管理的。
工程目录
2.也可采用iOS常用的Cocoapods
2.1 先删除这些工程的引用
2.2 在pod文件中引入对应工程
九.参考文档
十.报错参考
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
