React Native

概述

五大方面内容：

简介
搭建开发环境
基础语法
架构原理
项目实践

1. 简介

FaceBook 2015 IOS Android reactnative.dev/

移动App的开发模式：原生开发->原生App->Android、iOS、Windows（X）混合开发->混合App->Reactive Native（FaceBook）、Weex（Alibaba）、Flutter（Google） H5开发->Web App->HTML、CSS、JavaScript 引擎 JSCore、V8、Flutter engine

RN的优势

开发体验好
开发成本低
学习成本低

RN和客户端的关系

RN-->Bridge-->Andriod(Kotlin | Java) |----->IOS(Swift | Objective-C)

RN的劣势

不成熟
性能差
兼容性差

搭建开发环境概述

1. 基础环境
1. 搭建安卓环境
1. 搭建iOS环境
1. 初始化项目

基础环境搭建安装Node.js->安装Yarn->安装RN脚手架(npm install -g react-native-cli)

!windows下只能搭建Android开发环境；但是Mac下既能搭建Android开发环境，也能搭建iOS开发环境

搭建环境需要科学上网

搭建安卓开发环境

1. 安装JDK
1. 安装Android Studio
1. 安装Android SDK
1. 配置环境变量

安装SDK：必须是1.8版本的，需要登陆，然后一直下一步即可，使用java -version验证
安装Android Studio：下载、安装、启动Android Studio，然后创建项目

！Android Studio会自动安装最新版本的SDK，但是RN需要特定版本的SDK，这就是为什么需要单独下载SDK的原因了。在Tools下找到SDK Manager，然后按照下面的顺序进行：

初始化项目

创建项目 react-native init myproject && cd myproject && yarn android
安装vscode插件 ES7 React/Redux/GraphQL/React-Native snippets 使用快捷命令，例如：rnc rnf
调试工具: 模拟器会随着Android Studio和Xcode一起安装，启动应用，模拟器也会一起启动-在模拟器中点击一下，然后按下ctrl+m选择debug开始调试
真机调试：打开USB调试模式-通过USB将电脑和手机连接起来-启动应用，在手机上安装应用

基础语法 - style

1. 掌握React：JSX 组件生命周期 Hook API Redux 常用安装包
1. Style Sheet
1. Flexbox
1. 组件和API
1. 路由与导航

RN中的样式与CSS中是不同的：没有继承性（只有Text组件有继承性）、样式名采用小驼峰、所有尺寸都没有单位、有些特殊的样式名称在web开发的时候是没有的（marginHorizontal marginVertical）

样式声明的两种方式：对象或者数组对象（如果是数组形式的，后面的可以覆盖前面的）

样式的使用方式：

js 复制代码

import { StyleSheet } form 'react-native';
const styles = StyleSheet.create({
    foo: fooStyleObj,
    bar: barStyleObj,
});

// 使用
style = {[styles.foo, styles.bar]}

基础语法 - FlexBox

1. 基本概念：容器、项目、主轴（默认为竖直方向）、交叉轴
1. 常见属性：flexDirection、justifyContnent、alignItems、flex
1. 获取屏幕尺寸：import {Dimensions} from 'react-native'; const windowSize = Dimensions.get('window'); const windowWidth = windowSize.width;

基础语法 - 组件和API

1. 简介
1. 核心组件：本质上是对原生组件的封装，是来自react-native库的组件；例如Image组件实际上是对Android中的ImageView或者iOS中的UIImageView组件的封装；View或者Text组件也是如此。核心组件可以分成以下几类：基础组件、交互控件、列表视图、iOS或者Android独有组件、其他组件。具体来说核心组件有：View Text Alert Button Switch StatusBar ActivityIndicator Image TextInput Touchable ScrollView SectionList FlatList Animated（组件必须经过特殊处理才能够有动画）
1. 第三方组件
1. 自定义组件

Image组件

作用：加载图片
加载方式：本地路径、网络路径、Base64格式

Touchable组件

TouchableHighlight：触碰后高亮显示
TouchableOpacity：触碰之后透明度降低
TouchableWithoutFeedback：触碰之后没有响应

SafeAreaView组件

用来解决布局中的内容跑到刘海屏下面的问题的组件。

可以直接使用动画的组件

Animated.View
Animated.Text
Animated.ScrollView
Animated.Image

创建动画的步骤：

Animated.Value() 初始化单个值
Animated.ValueXY() 初始化向量值
将初始值绑定到动画组件上去，例如：opacity translate
逐帧修改初始值：

Animated.decay
Animated.spring
Animated.timing

第三方组件

指的是需要单独通过第三方库安装的组件
使用步骤：安装-配置-使用
常见的第三方组件：WebView Picker Swiper AsyncStorage Geolocation Camera

WebView

安装：yarn add react-native-webview
配置：github.com/react-nativ...
使用：指定uri或者直接渲染html

Picker

安装：yarn add @react-native-picker/picker
配置：github.com/react-nativ...
使用：注意Android和iOS的区别

Swiper

安装：yarn add @react-native-swiper
配置：github.com/leecade/rea...

AsyncStorage

安装：yarn add @react-native-async-storage/async-storage
配置：github.com/react-nativ...
使用：用来做增删改查用的；一般会对其进行封装并提供set\delete\update\get方法

Geolocation

安装：yarn add @react-native-community/geolocation
配置：github.com/react-nativ...
使用：通过手机获取经纬度信息

Camera

安装：yarn add react-native-camera
配置：github.com/react-nativ...
使用：拍照、扫码、人脸识别

Image-Picker

安装：yarn add react-native-image-picker
配置：github.com/react-nativ...
使用：拍照、扫码、人脸识别、相册

自定义组件

指的就是开发自己封装的可复用的组件

路由和导航

1. 简介
1. 基础组件
1. Stack导航
1. BottomTab导航
1. Drawer导航
1. MaterialTopTab导航

不同于web开发中使用的是React-Router实现路由导航，在RN中是通过React-Navigation进行导航的

5.x reactnavigation.org/

路由的使用：

js 复制代码

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';

export const App = () => {
    return (
        <NavigationContainer>...</NavigationContainer>
    )
}

Stack导航

RN中是没有web端的history对象的，在使用路由之前需要将组件先声明在Stack中：
yarn add @react-navigation/stack

使用举例：

js 复制代码

import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'
const Stack = createStackNavigator(); 

const HomeScreen = ({}) => {
    return (
        <Button onPress={()=>void navigation.navigate('Details')} title="跳转到详情页">
    )
}

export const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Details">
                <Stack.Screen name="Home" component={HomeScreen}>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

可以看出来，重要的是：Stack.Navigator Stack.Screen和navigation.navigate.

Navigator属性：

initialRouteName
headerMode: float screen none
screenOptions

Screen属性：

options
- title
- headerTitleStyle
- headerStyle
- headerLeft
- headerRight
- headerTinyColor

详细举例如下所示：

未完待续...

React Native入门笔记

React Native

概述

1. 简介

RN的优势

RN和客户端的关系

RN的劣势

搭建开发环境概述

搭建安卓开发环境

初始化项目

推荐的开发环境

基础语法 - style

基础语法 - FlexBox

基础语法 - 组件和API

Image组件

Touchable组件

SafeAreaView组件

可以直接使用动画的组件

第三方组件

WebView

Picker

Swiper

AsyncStorage

Geolocation

Camera

Image-Picker

自定义组件

路由和导航

Stack导航