在安卓的学习路径中 , 启动页算是很靠前的一项了 , 可是在做RN的时候却发现, 很多教程都是通过开源框架去做的 , 拜托 , 刚开始就学框架不太好吧?? 所以在这里 , 我们可以使用安卓的思维去做一个RN的Splash界面 , 虽然我不知道这样好不好 , 但至少是可以实现的.
Android的实现方法
Splash界面最开始是为了在初始化App的时候不要有明显的卡顿 , 所以就做了个Splash页面来展示出来 ,同时初始化数据 . 不仅起到了宣传品牌的效果, 而且也明显的加强了用户体验
Android中有很多种方法可以实现 , 这里使用最简单的线程休眠方法.
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(3000);
startActivity(intent);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
使用线程休眠来展示页面 , 当然在休眠的同时也可以去做一下初始化 , 3秒之后跳转界面.以此为据, 我们来做RN的Splash
React Native的Splash
- 首先我对Navigator进行了抽取,封装成了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 //传入参数
};
return (
<MyNavigator rootRoute={rootRoute}/>
);
}
此时 , 默认的页面即为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中我们可以发现定时器这一控件 , 我们就用他来做: 在界面渲染完成的时候(componentDidMount)开始定时 , 3秒之后跳转到下一界面 ,界面不可见时(componentWillUnmount)清空定时器
以下为SplashPage的完整代码
class SplashPage extends Component {
// 界面渲染完成的回调
componentDidMount() {
// 开始计时
this.timer = setTimeout(
() => {
//3秒之后的操作
var nextRoute = {
component: LoginAndRegisterPage,
};
this.props.navigator.push(nextRoute); // 页面跳转
},
3000
);
}
componentWillUnmount() {
// 如果存在this.timer，则使用clearTimeout清空。
// 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个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完成, 敲黑板写一下重点吧 , 这些自己了解就好
- 图片的全屏()
- 界面跳转Navigator
- 定时器timer
- 生命周期函数
