美文网首页
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