学习知识:
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. 首页
网友评论