在安卓的學(xué)習(xí)路徑中 , 啟動頁算是很靠前的一項(xiàng)了 , 可是在做RN的時候卻發(fā)現(xiàn), 很多教程都是通過開源框架去做的 , 拜托 , 剛開始就學(xué)框架不太好吧?? 所以在這里 , 我們可以使用安卓的思維去做一個RN的Splash界面 , 雖然我不知道這樣好不好 , 但至少是可以實(shí)現(xiàn)的.
Android的實(shí)現(xiàn)方法
Splash界面最開始是為了在初始化App的時候不要有明顯的卡頓 , 所以就做了個Splash頁面來展示出來 ,同時初始化數(shù)據(jù) . 不僅起到了宣傳品牌的效果, 而且也明顯的加強(qiáng)了用戶體驗(yàn)
Android中有很多種方法可以實(shí)現(xiàn) , 這里使用最簡單的線程休眠方法.
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(3000);
startActivity(intent);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
使用線程休眠來展示頁面 , 當(dāng)然在休眠的同時也可以去做一下初始化 , 3秒之后跳轉(zhuǎn)界面.以此為據(jù), 我們來做RN的Splash
React Native的Splash
- 首先我對Navigator進(jìn)行了抽取,封裝成了MyNavigator, 是的傳入的rootRoute作為第一界面, 如圖所示:
/**
* 抽取的Navigator 需要傳入rootRoute作為第一界面
*/
export default class MyNavigator extends Component{
render(){
return(
<Navigator
initialRoute={this.props.rootRoute}
configureScene={(route) => {
let configure = Navigator.SceneConfigs.PushFromRight;
switch (route.configure) {
case Consts.FloatFromLeft:
configure = Navigator.SceneConfigs.FloatFromLeft;
break;
case Consts.FloatFromBottom:
configure = Navigator.SceneConfigs.FloatFromBottom;
break;
}
return {
...configure,
gestures: {}//禁用滑動退出
};
}}
renderScene={(route, navigator) => {
// 從route對象中獲取頁面組件
var Minuit = route.component;
return (<Minuit
navigator={navigator} {...route.passProps}/>);
}}
></Navigator>
)
}
}
- 在Splash界面中定義路由并傳入頁面信息
render() {
var rootRoute = {
component: SplashPage //傳入?yún)?shù)
};
return (
<MyNavigator rootRoute={rootRoute}/>
);
}
此時 , 默認(rèn)的頁面即為SplashPage, 這里直接放一張圖片就好
render() {
return (
<View style={{flex: 1}}>
<StatusBar hidden={true} translucent={true}/>
<Image source={require('./modules/img/splash.png')} style={styles.container}>
</Image>
</View>
);
}
這里一定要注意了 , 如下的屬性可以讓圖片全屏(試了好久)
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null, //必須為null
height: null, //必須為null
},
- 接下來就可以去模擬線程休眠了 , 在API中我們可以發(fā)現(xiàn)定時器這一控件 , 我們就用他來做: 在界面渲染完成的時候(componentDidMount)開始定時 , 3秒之后跳轉(zhuǎn)到下一界面 ,界面不可見時(componentWillUnmount)清空定時器
以下為SplashPage的完整代碼
class SplashPage extends Component {
// 界面渲染完成的回調(diào)
componentDidMount() {
// 開始計時
this.timer = setTimeout(
() => {
//3秒之后的操作
var nextRoute = {
component: LoginAndRegisterPage,
};
this.props.navigator.push(nextRoute); // 頁面跳轉(zhuǎn)
},
3000
);
}
componentWillUnmount() {
// 如果存在this.timer补履，則使用clearTimeout清空忧换。
// 如果你使用多個timer价脾，那么用多個變量，或者用個數(shù)組來保存引用，然后逐個clear
this.timer && clearTimeout(this.timer);
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar hidden={true} translucent={true}/>
<Image source={require('./modules/img/splash.png')} style={styles.container}>
</Image>
</View>
);
}
}
至此 , Splash完成, 敲黑板寫一下重點(diǎn)吧 , 這些自己了解就好
- 圖片的全屏()
- 界面跳轉(zhuǎn)Navigator
- 定時器timer
- 生命周期函數(shù)
