# react-native

**Repository Path**: lizhihui1989/react-native

## Basic Information

- **Project Name**: react-native
- **Description**: react-native课程设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-10
- **Last Updated**: 2021-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Native课程内容

## 一、课程介绍

###  1、课程背景

**袋鼠海购**是使用 React Native 技术开发的一款手机在线商城APP。React Native 是 facebook 公司推出一种使用javascript 和 React 开发 App 的技术。它可以使用一套代码同时编译到 android 端 和 ios端。掌握好这个技术更加有利于我们在前端行业中生存。

### 2、课程概述

本课程会先讲解 React Native 的环境搭建,然后再到 React Native 基础知识，最后会讲解到 **袋鼠海购** 的项目实战。

### 3、课程特色

本套课程,全程代码都是老师手把手的教大家开发,让大家完完整整的体验到React Native开发过程中的所有细节。

### 4、课程内容

分为四大部分:

1. React Native 环境搭建
2. React Native 基础知识
3. React Native基础语法
4. React Native 项目实战

### 5、使用人群

本课程适用于已经掌握了以下技能的同学:

1. html
2. css 和 flex
3. javascript 
4. npm
5. React 

### 6、环境和软件版本

老师上课所采用的开发环境如下:

1. 系统版本 window 10
2. 开发工具 vs code
3. React Native 版本  `0.62.2`
4. React `16.13.1`
5. 屏幕投影工具  `scrpy` 





## 二、环境安装

### 概述

`react-native` 的环境搭建相比较于普通的web项目(vue、react）来说要繁琐不少，但是通过以下的方式基本都可以得到解决。

- [RN的官网文档](https://reactnative.cn/docs/getting-started.html)

  

### 安装环境介绍

- 操作系统：win7操作系统、win10操作系统
- 手机：`安卓手机真机`
- 必须安装的依赖有:Node、JDK、JRE、Android SDK、Android Studio



### Node的安装

- 先到 [官网 ](http://nodejs.cn/)去下载node版本
- 以 **管理员** 身份安装 然后一直点击下一步即可



### 安装命令行工具

命令行工具是react-native comman line

```
npm install -g react-native-cli
```



### 安装JRE和JDK

> 下载jdk和jre

jre:	Java Runtime Enviroment 		运行库（java运行环境）

jdk：Java Development Kit		java开发库（java开发工具包）

l 下载地址：https://www.oracle.com/technetwork/java/javase/downloads/index.html



安装JDK,第一是安装JDK,第二是安装jre.

建议两个都安装在同一个java文件夹中的不同文件夹中。

留意一下JDK安装的目录就行了.

注意：***\*版本需要在\*******\**1.8以上\**\******\**,路径都用默认，安装到C盘\**\***

![img](images/wps1.jpg)

### 配置Java环境

配置JDK环境变量,***\*必须配置到系统环境的path里面。\****

(1) 计算机→属性→高级系统设置→高级→环境变量

 

(2)***\*系统变量\****→新建 ***\*JAVA_HOME\**** 变量 。变量值填写jdk的安装目录

***\*C:\Program Files\Java\jdk1.8.0_191\****

![img](images/wps2.jpg)

 

(3)***\*系统变量\****→寻找 Path 变量→编辑,在变量值输入***\*%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;\****（注意原来Path的变量值末尾有没有;号，如果没有，先输入；号再输入上面的代码）

![img](images/wps3.jpg)

(4)系统变量→新建 ***\*CLASSPATH\**** 变量。变量值填写***\*.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar\****（注意最前面有一点）

![img](images/wps4.jpg)

检测java中的jdk环境是否安装正确，在命令提示符窗口中输入一下命令：

 

java –version

![img](images/wps5.jpg)





### 安装Android Studio

软件下载地址 https://developers.google.cn/

### ![img](images/wps6.jpg)

 

1.next下一步

 

![img](images/wps7.jpg) 

 

 

2.next下一步

![img](images/wps8.jpg) 

 

3.next下一步 

![img](images/wps9.jpg) 

4.

![img](images/wps10.jpg) 

 

 

5.安装

![img](images/wps11.jpg) 

 

6.安装完成 next

![img](images/wps12.jpg) 

 

7.完成

![img](images/wps13.jpg) 

 

 

8.是否导入相关设置![img](images/wps14.jpg)

 

 

9.选择取消

![img](images/wps15.jpg) 

 

 

10.欢迎界面

 

![img](images/wps16.jpg) 

 

 

11.选择安装方式

![img](images/wps17.jpg) 

 

 

12.选择UI主题(看心情)

![img](images/wps18.jpg) 

 

 

 

13.完成

 

![img](images/wps19.jpg) 

 

 

 

15.next

![img](images/wps20.jpg) 

 

16.

 

![img](images/wps21.jpg) 

 

17.finish

![img](images/wps22.jpg) 

 

 

18.下载中，需要等待

 

![img](images/wps23.jpg) 

 

 

19.完成(期间有失败的地方，重复)

 

![img](images/wps24.jpg) 

 

20.点击configure

![img](images/wps25.jpg) 



### 配置SDK Manager

#### 进入sdk Manager

![img](images/wps26.jpg) 

 

#### 安装sdk platform

​    ![img](images/wps27.jpg)

 

​    

#### 安装sdk tools

![img](images/wps28.jpg) 

 

![img](images/wps29.jpg) 

 

全部接受协议，点击next

![img](images/wps30.jpg) 

 

23.等待下载

 

![img](images/wps31.jpg) 

 

###  创建应用

初始化命令

```
react-native init myproject
```

 

l 备注：设置淘宝镜像

方法1：手动修改文件

D:\Program Files\nodejs\node_modules\npm

registry=https://registry.npm.taobao.org

 

方法2：用命令行工具

npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

![img](images/wps32.jpg)

我们可以通过react-native --help来查看它所支持的所有命令

**如果报错，用yarn安装**

l yarn、React Native 的命令行工具（react-native-cli）。

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

```
npm install -g yarn react-native-cli
```



l 安装完 yarn 后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global



l 安装完 yarn 之后就可以用 yarn 代替 npm 了

例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

 

### Android Studio构建项目

用android studio打开项目目录下的***\*android\****文件夹，安装android开发的依赖，并进行构建。

> ​	注意：这个过程事件挺长，耐心等待



## 三、RN布局和样式语法

主要讲解以下React的基础知识,方便同学们更好的学习项目的知识。

- React Native 介绍
- 文件目录结构
- JSX
- RN样式
- 基本标签
- 插值表达式
- 调试
- 事件
- 生命周期
- mobx

### React Native 介绍



![image-20200526120559183](images/image-20200526120559183.png)

### 文件目录结构

```js
│  App.js           ---   项目的根组件
│  index.js         ---   项目的入口文件     
│  package.json     ---   项目的描述文件         
│  .eslintrc.js     ---   eslint的配置文件            
│  .prettierrc.js   ---   格式化配置文件             
│  android          ---   编译安卓相关       
│  ios              ---   编译ios相关
```

### vs code的插件

![image-20200526173035552](images/image-20200526173035552.png)





### JSX

> React中写组件的代码格式 全称是 `JavaScript xml`

#### jsx语法规则：

1.定义虚拟dom的时候，不要写引号

2.标签中混入js表达式的时候要用{}。

3.样式的类名指定不要用class，要用className

4.只有一个根 标签

5.标签首字母

​	(1)若小写字母开头，则将标签改成html中 同名元素。如果没有同名元素，则报错

```
<good> hellow world</good>
```

​	(2)若大写字母开头，则去渲染对应组件。若组件没有定义，则报错。比如

```
<Gpood></Good>
```



```jsx
<body>
    <div id="app"></div>
    <script type="text/babel">
        var str = "我是中国人";
        var myStr = "Hello World"
        const vDom = (
        <div className="container">
            <div id="title" style={{ color: "white", background: "red", fontSize: "20px" }}>
                <span>{str}</span>
                <span>{myStr.toLocaleLowerCase()}</span>
            </div>
            <span>这是一个字符串</span>

            <good>hello world</good>
            <Good>hello world</Good>

        </div>


        )

        ReactDOM.render(vDom, document.getElementById("app"))
    </script>
</body>
```

### RN样式

> 主要讲解和web开发的不同之处

- flex布局
- 样式继承
- 单位
- 屏幕宽度和高度
- 变换

### flex布局

- 所有容器默认都是`flexbox`
- 并且是纵向排列 也就是 `flex-direction:column`

### 样式继承

背景颜色、字体颜色、字体大小等没有继承

### 单位

- 不能加 `px` 单位 
- 不能加 `vw vh` 等单位
- 可以加百分比单位

### [屏幕宽度和高度](https://reactnative.cn/docs/dimensions#__docusaurus)

```jsx
import {Dimensions } from "react-native";
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);
```

### 变换

```jsx
<Text style={{transform:[{translateY:300},{scale:2}]}}>变换</Text>
```



### [组件](https://reactnative.cn/docs/activityindicator)

1. View

2. Text

3. TouchableOpacity 

4. Image

5. ImageBackground

6. TextInput

7. 其他

   1. button
   2. FlatList
   3. ScrollView
   4. StatusBar
   5. TextInput



### View

- 相当于以前`web`中的div
- 不支持设置字体大小,字体颜色等
- 不能直接放文本内容
- 不支持直接绑定点击事件 (一般使用 `TouchableOpacity`  来代替)

### Text

> 文本标签

- 文本标签 可以设置字体颜色、大小等
- 支持绑定点击事件



### TouchableOpacity 

> 可以绑定点击事件的块级标签

- 相当于块级的容器
- 支持绑定点击事件 `onPress`
- 可以设置点击时的透明度  

```jsx
<TouchableOpacity  activeOpacity={0.5}  onPress={this.handleOnPress} ></TouchableOpacity>
```



### Image

> 图片标签

- 渲染本地图片时

  ```jsx
  <Image source={require("../girl.png")}  />
  ```

- 渲染网络图片时,必须加入宽度和高度

  ```jsx
  <Image source={{uri:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590514654506&di=38fa919d4c78fb776536b922bb94eec3&imgtype=0&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2013%2F03%2F28%2F927_xgzwl%2520%25281%2529.jpg"}} style={{width:200,height:300}}  />
  ```

- 在 Android 上支持 GIF 和 WebP 格式图片

  默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在`android/app/build.gradle`文件中根据需要手动添加以下模块：

  ```jsx
  dependencies {
    // 如果你需要支持Android4.0(API level 14)之前的版本
    implementation 'com.facebook.fresco:animated-base-support:1.3.0'
  
    // 如果你需要支持GIF动图
    implementation 'com.facebook.fresco:animated-gif:2.0.0'
  
    // 如果你需要支持WebP格式，包括WebP动图
    implementation 'com.facebook.fresco:animated-webp:2.1.0'
    implementation 'com.facebook.fresco:webpsupport:2.0.0'
  
    // 如果只需要支持WebP格式而不需要动图
    implementation 'com.facebook.fresco:webpsupport:2.0.0'
  }
  ```

### ImageBackground

> 一个可以使用图片当作背景的容器,相当于以前的 `div+背景图片`

```jsx
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
```



### TextInput

> 输入框组件

- 可以通过 `onChangeText`事件来获取输入框的值

## 四、RN逻辑层语法

1. 插值表达式

2. 组件

3. 状态 state

4. 属性 props

5. 调试

6. 事件

7. 生命周期

   


### 插值表达式

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

const Index = () => <View>
  <Text>{"开心"}</Text>
  <Text>{123}</Text>
</View>

export default Index;
```

### 组件

- 函数组件
  - 没有state (通过hooks可以有)
  - 没有生命周期(通过hooks可以有)
  - 适合简单的场景
- 类组件
  - 适合复杂的场景
  - 有state
  - 有生命周期

#### 函数组件

```jsx
class Index extends Component {
  render() {
    return (
      <View>
        <Btn></Btn>
      </View>
    );
  }
}
// 函数组件
const Btn = () => <Button title="点我" />
```

#### 类组件

```jsx
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  render() {
    return (
      <View>
        <Text>类组件</Text>
      </View>
    );
  }
}
export default Index;
```

### 状态 state

```jsx
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  // 1 声明state
  state = {
    num: 100
  }
  render() {
    return (
      <View>
        {/* 2 使用state */}
        <Text onPress={this.handlePress} >{this.state.num}</Text>
      </View>
    );
  }
  // 3 修改state
  handlePress = () => {
    this.setState({ num: 1010 });
  }
}
export default Index;
```

### 属性 props

> 父子传递数据的关键

```jsx
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  render() {
    return (
      <View>
        <BigText fontColor="red" >大博妞</BigText>
      </View>
    );
  }
}

class BigText extends Component {
  render() {
    // 通过props来接收父组件传递的数据
    return <Text style={{ color: this.props.fontColor }} >
      {/*  children 其实就是插槽 类似vue中的slot  */}
      {this.props.children}
    </Text>
  }
}


export default Index;
```



### 调试

分为两种方式

2. 使用谷歌浏览器来调试

   1. 使用谷歌浏览器即可
   2. 不能查看标签结构
   3. 不能查看网络请求

3. 使用rn推荐的工具 [react-native-debugger](https://github.com/jhen0409/react-native-debugger)来调试 (**老师推荐使用这种方式**)

   1. 可以查看标签结构
   2. 不能查看网络请求

4. 想要查看网络请求

   1. 找到项目的入口文件 `index.js`

   2. 加入以下代码即可

      ```js
      GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest
      ```

      

### 事件

绑定时间需要特别注意 this的指向问题,可以总结为如下的方式

- 使用箭头函数
- 通过bind重新绑定this
- 匿名函数

```jsx
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Index extends Component {
  state = { num: 100 }
  // 丢失 state
  handlePress1() {
    console.log(this.state);
  }
  // 正常
  handlePress2 = () => {
    console.log(this.state);
  }
  // 正常
  handlePress3() {
    console.log(this.state);
  }
  // 正常
  handlePress4() {
    console.log(this.state);
  }
  // 正常
  render() {
    return (
      <View>
        {/* 导致事件函数中获取不到state */}
        <Text onPress={this.handlePress1} >事件1</Text>
        {/* 正常 */}
        <Text onPress={this.handlePress2} >事件1</Text>
        {/* 正常 */}
        <Text onPress={this.handlePress3.bind(this)} >事件3</Text>
        {/* 正常 */}
        <Text onPress={() => this.handlePress4()} >事件4</Text>
      </View>
    );
  }
}
export default Index;
```

---



### [生命周期](https://zh-hans.reactjs.org/docs/react-component.html#mounting)

> 生命周期指的`react组件`的从创建到销毁的整个过程中会自动触发的函数

[在线图示](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

![image-20200528103625667](images/image-20200528103625667.png)



### 主要的生命周期

- *constructor*
  - 组件被实例化的时候出发 一般用做对组件做初始工作,如设置`state`等

- render
  - 组件开始渲染时触发
  - 组件被更新时触发 -  state和props发生改变时触发
- componentDidMount
  - 组件挂载完毕,可以发送异步请求获取数据
- componentWillUnmount
  - 组件被卸载时触发
  - 一般用在清除定时器或者取消订阅等



## 五、RN高级

Tabbar的使用

redux的使用

webview组件的使用

本地存储的使用

项目打包和上线

## 六、项目开发

**袋鼠海购** 是使用 React Native 技术开发的一款手机在线商城APP，包含首页商品列表、商品详情页、添加购物车、提交订单、手机号登录等功能



#### 首页商品列表

用户进入首页，呈现商品列表，商品列表中包含图片、商品名称、价钱等信息。顶部显示商品搜索框，可以进行页面搜索。

<img src="images/001首页.jpg" alt="001首页" style="zoom: 33%;" />

#### 商品详情页

点击商品列表中的商品，跳转到商品详情页，在详情页面中呈现商品大图、价钱、名称和商品详情。

页面底部可以添加购物车

<img src="images/002详情页.jpg" alt="002详情页" style="zoom:33%;" />

#### 购物车功能

点击底部tab栏目，可以跳转到购物车页面，商品数量可以点击增加、减少、单选、全选、删除商品，并且可以计算总价。

<img src="images/003购物车.jpg" alt="003购物车" style="zoom:33%;" />

#### 订单确认

点击“进行支付按钮”，跳转到订单确认页面，页面中可以进行支付。

<img src="images/004订单确认-1613788643398.jpg" alt="004订单确认" style="zoom:33%;" />

#### 我的订单

在我的订单页面，可以查看各种类型的订单，包含代付款、代发货、待收货、退货退款等订单。

<img src="images/005我的.jpg" alt="005我的" style="zoom:33%;" />