React Native入门详解–实战开发中常见的需求
本文中主要介绍
- RN开发-应用适配方案
- RN开发-路由解决方案
- RN开发-如何实现渐变色
- ......
该教程默认你了解RN组件的基本使用。
RN组件的基本使用:juejin.cn/post/694537…
正餐开始
1、优化目录接口
在项目开发时,我们对项目的目录结构进行优化。
新增目录:
- api:http请求模块,封装了应用中所有请求,便于开发复用和后期维护
- components:公共组件,应用的公共组件都放在这个目录中
- asstes:公共资源(图片和样式),应用本地的图片都放在这个目录中
- views:视图模块,应用所有的页面组件都放在这里
- utils:工具模块,应用中用的工具函数都放到这里
- router:路由模块,用来配置的应用的路由
2、组件的适配
RN中组件单位默认为dp,而设计图通常是px.在开发过程中,势必会遇上屏幕适配(ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕)的问题。
核心原理
虽然设备屏幕尺寸是不一致的,但是组件尺寸
和屏幕宽度
比例是固定的,这个比例和效果图元素尺寸
与效果图宽度
是一致:效果图元素尺寸(px)
/ 效果图宽度(px)
= 组件尺寸(dp)
/屏幕宽度(dp)
即:组件尺寸(dp)
= 效果图元素尺寸(px)
* 屏幕宽度(dp)
/ 效果图宽度(px)
适配工具
在utils中新建pxTodp.js
// 用来完成适配的工具
import { Dimensions } from 'react-native';
// 设备宽度,单位 dp
const deviceWidthDp = Dimensions.get('window').width;
// 设计稿宽度(这里为640px),单位 px
const uiWidthPx = 540;
// px 转 dp(设计稿中的 px 转 rn 中的 dp)
export default (uiElePx) => {
return uiElePx * deviceWidthDp / uiWidthPx;
}
3、路由导航
第三方库React Navigation应该是实现RN路由导航最成熟的方案了,用它准没错。
React Navigation官网:reactnavigation.org/
React Navigation路由导航模式
React Navigation提供了tabNavigator
、stackNavigator
和DrawerNavigator
三种路由导航模式,因为第三种抽屉式导航路由很少用到,这里主要介绍前两种。
React Naigation核心依赖
- react-native-gesture-handler:用于手势切换页面。
- react-native-screens:用于原生层释放未展示的页面,改善 app 内存使用。
- react-native-safe-area-context: 用于保证页面显示在安全区域(主要针对刘海屏)。
- @react-native-community/masked-view:用在头部导航栏中返回按钮的颜色设置。
- @react-navigation/native:为 React Navigation 的核心。
- react-native-reanimated:抽屉式路由导航DrawerNavigator的核心依赖,但是官网将它列入核心的依赖中还是安上吧
开始安装:
yarn add @react-navigation/native
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
TabNavigator
如果需要实现向微信这种点击屏幕底部的tab栏实现路由切换,就可以使用tabNavigator
.
基础配置
- 1、安装Tabnavigator相关依赖
yarn add @react-navigation/bottom-tabs
- 2、将导航路由容器组件挂载到页面上(router/index.js)
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
function App() {
return (
<NavigationContainer>
...放入tab导航路由/stack导航路由
</NavigationContainer>
);
}
export default App;
- 3、配置底部导航器和导航视图(router/tabNavigator.js)
- 4、将tab导航器挂载导航路由容器中(router/index.js)
- 5、效果预览
可能会遇到的问题
- 拉起软键盘时,将底部导航器顶起来。如下图
修改android\app\src\main\AndroidManifest.xml
添加动画
tabNavigator式路由导航功能已经实现了,我们可以在此基础上添加一个路由切换tabbar动画效果。当路由激活时,tabbar图标由小变大的入场动画.效果如下:
- 1、导入Animated动画组件
- 2、 在tabNavigator组件声明动画值控制所有tabbar动画状态
- 3、路由切换时,被激活路由配置动画并执行
StackNavigator
这个一个堆栈式路由模式,采用堆栈式的页面导航来实现各个界面跳转。
基础配置
- 1、安装stackNavigator相关依赖
- 2、将导航路由容器组件挂载到页面上(router/index.js)
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
function App() {
return (
<NavigationContainer>
...放入tab导航路由/stack导航路由
</NavigationContainer>
);
}
export default App;
- 3、配置Stack导航器(router/stackNavigator.js)
- 4、将tab导航器挂载导航路由容器中(router/stackNavigator.js)
- 5、效果预览
路由模式嵌套
在实际业务场景中我们的应用往往是TabNavigator和StackNavigator导航模式同时使用,例如应用进入后展示TabNavigator相关路由,在某些路由屏幕中需要跳转到非TabNavigator页面中。如下图,这种场景就需要做两种路由模式的嵌套
- 1、将导航路由容器组件挂载到页面上(router/index.js)
- 2、配置Stack导航器(router/stackNavigator.js)
- 3、配置Tab导航器(router/tabNavigator.js):同TabNavigator板块中基础配置一致
- 4、将Tab导航器导入、并挂载到Stack导航器中(router/stackNavigator.js)
- 5、将Stack导航器导入、并挂载到导航路由容器组件中(router/index.js)
编程式导航
使用Stack导航器时,我们有时需要通过代码实现路由切换,例如点击页面某个点位或者自定义导航器的按钮
navigation:导航器会为每个屏幕组件传入props属性navigation
通过它可以实现路由切换
navigation.navigate( routerName )
- 作用::切换路由页面,当前页面切换到当前页面无效。例如,在A商品详情页跳转到B商品详情页,本质是一个页面详情页跳往详情页只是路由参数不同。
- 参数:routerName(路由名称 )
navigation.push( routerName )
- 作用:切换路由页面,一直往堆栈里加可以切换到当前页面
- 参数:routerName(路由名称 )
navigation.replace( routerName )
- 作用:切换新路由并替换旧路由记录
- 参数:routerName(路由名称 )
navigation.goback()
- 作用:返回上一个路由页面
navigation.popToTop()
- 作用:回到路由堆栈第一个路由页面
路由参数
传递参数
大部分导航API的第二个参数为params对象,通过这个对象来传递路由参数
接受参数
通过props的route.params中获取参数
初始化路由参数
4、渐变色
RN渐变色可以通过 react-native-linear-gradient 这个组件实现
- 安装依赖
- 在页面中使用
5、轮播图
轮播图可以通过 react-native-swiper 这个组件实现
- 安装依赖
- 在页面中使用
最后
大家的RN搭建过程可能会不太顺利,如果有需要帮助或者技术上交流的同猿欢迎加 V: gg_0632