1刁绒、啟動頁是用戶看到的一個應(yīng)用的第一個頁面客年，通過啟動頁蛾找，也可以解決React Native打開白屏的問題娩脾；
2、緊接上一篇打毛，在initialRoute里面我們傳入的組件叫Splash晦雨，那么接下來就可以自定義Splash組件：
import React, {Component} from "react";
import {
AppRegistry,
StyleSheet,
View,
Image,
Animated,
Dimensions
} from 'react-native';
import {notifyMessage} from "../utils/Util";
import storage from "../js/storage";
import Main from "./Main";
import GuideComponent from "./GuideComponent";
const {width, height} = Dimensions.get('window');
export default class SplashComponent extends Component {
constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(0), // 透明度初始值設(shè)為0
};
}
componentDidMount() {
Animated.timing( // 隨時間變化而執(zhí)行的動畫類型
this.state.fadeAnim, // 動畫中的變量值
{
toValue: 1, // 透明度最終變?yōu)?架曹，即完全不透明
duration: 2000
}
).start(); // 開始執(zhí)行動畫
this.timer = setTimeout(() => {
storage.load({
key: 'user',
autoSync: true,
syncInBackground: true,
}).then(ret => {
const isFirst = ret.isFirst;
if (isFirst !== "1") {
storage.save({
key: 'user',
rawData: {
isFirst: "1",
},
// 設(shè)為null,則不過期,這里會覆蓋初始化的時效
expires: null
});
this.props.nav.resetTo({
component: GuideComponent,
});
} else {
this.props.nav.resetTo({
component: Main,
});
}
}).catch((error) => {
switch (error.name) {
case 'NotFoundError':
storage.save({
key: 'user',
rawData: {
isFirst: "1",
},
// 設(shè)為null,則不過期,這里會覆蓋初始化的時效
expires: null
});
this.props.nav.resetTo({
component: GuideComponent,
});
break;
case 'ExpiredError':
break;
}
});
}, 2500);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return (
<Animated.Image
style={{
width: '100%',
height: '100%',
resizeMode: Image.resizeMode.stretch,
opacity: this.state.fadeAnim
}}
source={require('../images/splash.png')}
/>
)
}
}
AppRegistry.registerComponent('splash', () => SplashComponent);
3、幾個注意點(diǎn)：
1）首先我使用的是一張圖片作為啟動頁面顯示闹瞧，而且添加了一個動畫，圖片慢慢顯示出來展辞，動畫執(zhí)行時間是2秒奥邮，并且同時開啟了一個定時器，定時器時間是2.5秒罗珍，通過緩存的isFirst來判斷是跳轉(zhuǎn)首頁還是引導(dǎo)頁洽腺；
2）圖片全屏顯示的問題，如果我們不設(shè)置resizeMode覆旱，那么默認(rèn)是cover蘸朋，就是超出部分會截斷，我這里用的圖片尺寸是720*1280扣唱，使用stetch來拉伸藕坯；
#### resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') [](https://reactnative.cn/docs/0.44/image.html#resizemode)
決定當(dāng)組件尺寸和圖片尺寸不成比例的時候如何調(diào)整圖片的大小。
* `cover`: 在保持圖片寬高比的前提下縮放圖片噪沙，直到寬度和高度都大于等于容器視圖的尺寸（如果容器有padding內(nèi)襯的話炼彪，則相應(yīng)減去）。**譯注**：這樣圖片完全覆蓋甚至超出容器正歼，容器中不留任何空白辐马。
* `contain`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小于等于容器視圖的尺寸（如果容器有padding內(nèi)襯的話局义，則相應(yīng)減去）喜爷。**譯注**：這樣圖片完全被包裹在容器中，容器中可能留有空白
* `stretch`: 拉伸圖片且不維持寬高比萄唇，直到寬高都剛好填滿容器檩帐。
* `repeat`: 重復(fù)平鋪圖片直到填滿容器。圖片會維持原始尺寸穷绵。僅iOS可用轿塔。
* `center`: 居中不拉伸。
3仲墨、就是導(dǎo)航器Navigator的棧問題勾缭，啟動頁顯示完以后，我們是不希望用戶還能返回看到這個頁面目养，因此需要使用navigator.resetTo方法;
image.png
