【React Native】入门教程

一.搭建环境

在搭建环境这一环节，可能会遇到一些陌生的步骤、指令、配置和没有使用过的工具。面对此种情况，建议先不必深究，按文档走一遍，在搭建过程中先有个大概了解，期间如果遇到文档上没有的问题，可通过查询一些博客或者网站，在解决问题的过程中，能够加深对安装过程的理解。

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 (
            <View>
                <Text>这是一个最简单的页面</Text>
            </View>
        );
    }
}

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 (
      <View style={PageStyle.viewStyle}>
          <Text style={PageStyle.textStyle}>这是一个最简单的页面</Text>
      </View>
    );
  }
}

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 (
        <View style={PageStyle.viewStyle}>
            <Text style={PageStyle.textStyle}>姓名：{this.name}</Text>
            <Text style={PageStyle.textStyle}>年龄：{this.age}</Text>
        </View>
    );
}

reload，效果如下

展示3

这样一来，我们就可以想象通过接口拿到用户信息，然后展示出来的过程了。

5.交互

页面最重要的功能之二，有了数据展示，就要处理用户与项目的交互。RN中有丰富的手势和组件都可以实现与用户的交互。比如为年龄Text增加一个点击事件，点击后，年龄+1。

    render() {
        return (
            <View style={PageStyle.viewStyle}>
                <Text style={PageStyle.textStyle}>姓名：{this.name}</Text>
                <Text
                    style={PageStyle.textStyle}
                    onPress={
                        () => {
                          this.age += 1;
                        }
                    }
                >年龄：{this.age}</Text>
            </View>
        );
    }

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 (
            <View style={PageStyle.viewStyle}>
                <Text style={PageStyle.textStyle}>姓名：{this.state.name}</Text>
                <Text style={PageStyle.textStyle}>年龄：{this.state.age}</Text>
            </View>
        );
    }

reload后，可以看到展示效果不变。

3. 在点击事件中更新年龄，更新state

...
    <Text
        style={PageStyle.textStyle}
        onPress={ () => {
            this.setState({
                age: this.state.age += 1
            });
        }}
    >年龄：{this.state.age}</Text>
...

reload，点击年龄Text，可以看到UI上出现了变化。

4. state的使用

组件中使用state来展示UI的，都会根据state的刷新而及时重新进行渲染。

state的使用注意不能通过this.state.name = xx进行更新，而需要使用setState()方法进行更新。

五.props

页面最重要的功能之三，传值。

每个组件都可以接收任意输入值，称之为props。也可以理解为，props是传值的一个手段。

1. 我们将刚刚的信息展示拆成一个组件。

function InfoComponent(props) {
    return (
        <View>
          <Text style={PageStyle.textStyle}>姓名：{props.name}</Text>
          <Text style={PageStyle.textStyle}>年龄：{props.age}</Text>
        </View>
    );
}

2. 然后修改Page类的render布局

    render() {
        return (
            <View style={PageStyle.viewStyle}>
              <InfoComponent
                  name={this.state.name}
                  age={this.state.age}
              />
            </View>
        );
    }

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文件中引入对应工程

九.参考文档

1.React Native中文官方网站

2.React中文官方网站

3.Redux中文文档

十.报错参考

1.【React Native】报错 "config.h file not found"

2.【React Native】报错 "error：Build input file cannot be found"

3.【React Native】报错 "Multiple commands produce"

【React Native】 入门教程