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

学习知识:

1. React-navigation之 createStackNavigator

2. Image组件

3.  this.props.navigation.replace

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

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

效果图:


React Native页面跳转之启动界面(四)_第1张图片


React Native页面跳转之启动界面(四)_第2张图片

目录结构:


React Native页面跳转之启动界面(四)_第3张图片

1. 创建项目 react-native init navigation

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

React Native页面跳转之启动界面(四)_第4张图片

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

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


React Native页面跳转之启动界面(四)_第5张图片

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

React Native页面跳转之启动界面(四)_第6张图片

6. 首页


React Native页面跳转之启动界面(四)_第7张图片

你可能感兴趣的:(React Native页面跳转之启动界面(四))