React Native页面跳转之启动界面（四）

学习知识：

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. 首页


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容