ireading-RN-微信精选的示例代码
微信精选的一个示例项目,里面有个组件就是完成初次加载app的初始化选择分类的任务,里面使用了一个标记位来决定是加载这个页面还是项目的主页面。如果在这个页面中使用swipe组件就可以完成一些app的初次打开时,使用教程的滚动橱窗效果。
直接看代码
//ireading/app/page/splash.js
//这个splash就作为开始介绍的画面加载一个swipe,第一次以后就不用加载了
import React from 'react';
import {
Dimensions,
Animated
} from 'react-native';
//app主页面的容器
import MainContainer from '../containers/MainContainer';
//选择分类的容器,如果初次加载要选择这个容器
import CategoryContainer from '../containers/CategoryContainer';
import Storage from '../utils/Storage';//,导入存储,为了持久化
//存储标记
const maxHeight = Dimensions.get('window').height;
const maxWidth = Dimensions.get('window').width;
const splashImg = require('../img/splash.png');//加载图片
class Splash extends React.Component {
constructor(props) {
super(props);
this.state = { //这是动画效果
bounceValue: new Animated.Value(1)
};
}
componentDidMount() {
Animated.timing(
this.state.bounceValue, { toValue: 1.2, duration: 1000 }
).start();
this.timer = setTimeout(() => {
const { navigator } = this.props;
Storage.get('isInit') //获取初次打开的标记位
.then((isInit) => {
if (!isInit) { //如果为false,跳转到category组件去选择1-5分类数据
navigator.resetTo({
component: CategoryContainer,
name: 'Category',
isFirst: true
});
Storage.save('isInit', true); //同时把isInit存到本地数据库中
} else { //如果为isInit为true则表示已经打开过,直接跳到主容器
navigator.resetTo({
component: MainContainer,
name: 'Main'
});
}
});
}, 1000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return (
<Animated.Image
style={{ width: maxWidth,
height: maxHeight,
transform: [{ scale: this.state.bounceValue }] }}
source={splashImg}
/>
);
}
}
export default Splash;
//如果是滚动橱窗可以在滚动到最后一页时候才改变标记位的状态