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分類數(shù)據(jù)
navigator.resetTo({
component: CategoryContainer,
name: 'Category',
isFirst: true
});
Storage.save('isInit', true); //同時把isInit存到本地數(shù)據(jù)庫中
} 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;
//如果是滾動櫥窗可以在滾動到最后一頁時候才改變標記位的狀態(tài)
