前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发,最近也写了很多文章,希望让更多想了解的同学快速上手ReactNative.
ReactNative之App引导页实现逻辑
- 在RN中实现引导页,相比原生实现复杂多了。
- 原因:
- 1.RN中不能读取原生的配置信息info.plist文件,这样也就没法判断当前是不是最新版本,是最新版本就展示引导页
- 2.RN的本地存储是异步的,不是同步的,这样就导致在一开始的时候,想去获取本地存储信息,根据存储信息判断显示引导页还是主页,就会报错
- 报错原因很简单,程序一启动,就需要立马显示界面,但是由于异步,并不能那么快返回.
RN引导页解决思路:
- 自己写一个启动界面,一开始的时候显示启动界面
- 然后在显示完启动界面的方法,去判断待会显示引导页,还是主页
如何判断显示引导页还是主页
- 第一次进入界面,写个属性,记录下第一次加载。
- 每次启动,获取之前是否保存过第一次加载的属性,如果加载过,就显示主页,没加载过,就显示引导页
App引导页实现代码
import React, { Component } from 'react';import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
Image} from 'react-native';import Main from './Main/Main'import {Navigator} from 'react-native-deprecated-custom-components'import Guide from './Guide/Guide'import Common from './Common/Common'class LaunchView extends Component {
render(){
return (
<Image source={{uri:'LaunchImage'}} style={{width:Common.screenW,height:Common.screenH}}/>
)
}
componentDidMount() {
// 延迟点
setTimeout(this.openApp.bind(this),2000);
// this.openApp();
}
openApp(){
AsyncStorage.getItem('isFirst',(error,result)=>{
if (result == 'false') {
console.log('不是第一次打开');
this.props.navigator.replace({
component:Main })
} else {
console.log('第一次打开');
// 存储
AsyncStorage.setItem('isFirst','false',(error)=>{
if (error) {
alert(error);
}
});
this.props.navigator.replace({
component:Guide })
}
});
}}export default class App extends Component {
// 渲染场景
_renderScene(route, navigator){
return (
<route.component navigator={navigator} {...route} />
)
}
render() {
// 判断是不是第一次打开
return (
<Navigator initialRoute={{
component: LaunchView }}
renderScene={this._renderScene.bind(this)}
style={{flex:1}}
/>
);
}
}
实现效果
第一次进入
以后进入,就直接主页
主页
以上就是怎么用react实现引导页的详细内容,更多请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- 有哪些常用的 java 文本编辑器?(常用的java文本编辑器有哪些)
- Java中 AOP 的应用场景具体有哪些?(java中aop的应用场景有哪些)
- 如何在 Java 中实现踢人下线功能?(Java怎么实现踢人下线功能)
- Java 交换器(exchanger)的替代方案都有哪些呢?(java exchanger的替代方案有哪些)
- Java 中如何使用 JsonNode 来解析 JSON 数据?(Java JsonNode如何解析JSON数据)
- 如何进行Ruby代码安全检测
- 在 Java 中如何设置 Swing 的背景图片?(java中swing如何设置背景图片)
- Java 输入输出流出现问题该如何解决?(Java输入输出流出现问题怎么解决)
- Java 验证码的存储方式都有哪些呢?(Java验证码的存储方式有哪些)
- 在 Java 集合框架中,Arrays 类究竟有着怎样的地位?(Arrays类在Java集合框架中的地位)
猜你喜欢
AI推送时光机怎么用react实现引导页
前端开发2023-05-14
如何用react实现引导页
前端开发2023-07-04
Android简单实现引导页
前端开发2024-04-02
Android启动引导页使用ViewPager实现
前端开发2022-06-06
React怎么实现导入导出Excel文件
前端开发2023-06-05
ViewPager实现漂亮的引导页
前端开发2023-05-30
react怎么实现跳转页面
前端开发2023-05-14
ViewPager实现轮播图引导页
前端开发2024-04-02
android实现轮播图引导页
前端开发2024-04-02
Android中怎么利用zViewPager实现一个欢迎引导页面
前端开发2023-05-30
Android引导页面的简单实现
前端开发2022-06-06
SwiftUI 引导页界面实现示例
前端开发2024-04-02
js页面引导页的实现思路总结
前端开发2023-05-16
Android使用ViewPager实现启动引导页效果
前端开发2024-04-02
React Native中怎么实现动态导入
前端开发2023-07-02
react 怎么实现跳转到新页面
前端开发2023-05-14
React Native react-navigation导航怎么用
前端开发2024-04-02
React怎么使用refresh_token实现无感刷新页面
前端开发2023-06-30
咦!没有更多了?去看看其它编程学习网 内容吧