美文网首页
React Native页面跳转之启动界面(四)

React Native页面跳转之启动界面(四)

作者: Jason_兵哥 | 来源:发表于2018-06-26 20:03 被阅读330次

学习知识:

1. React-navigation之 createStackNavigator

2. Image组件

3.  this.props.navigation.replace

源代码地址: https://github.com/ysb002003/ReactNativeLearning_ReactNavigation

具体实现:创建两个组件页面,一个WelcomePage做为启动页面放一个欢迎图片,一个IndexPage做为APP首页或者登录页之类

效果图:

目录结构:

1. 创建项目 react-native init navigation

2. 修改App.js使其通过navigation变成一个系统的总组件。

3. 创建Images文件夹,放入需要使用的启动图片

4. 创建theme.js公共文件:

5. 启动页WelcomePage.js, 使用到Image组件,主要属性source={require('../images/launch.jpg');  在render完之后实现componentDidMount周期函数,进行延时跳转 (只要配置了navigator的component都会自动有一个属性,this.props.navigation)

6. 首页

相关文章

网友评论

      本文标题:React Native页面跳转之启动界面(四)

      本文链接:https://www.haomeiwen.com/subject/emnmyftx.html