react native 第一次下载app的欢迎页+每次启动app的启动页设计

---

---

 欢迎各位同窗加入：
React-Native群：397885169
大前端群：544587175
大神超多，热情无私帮助解决各类问题。

我想我写的这篇博文能够帮助到不少人，接下来要分享的东西，对app而言很重要，很常见，我先上图，你们看效果！

---

 

为何咱们要这么作呢？这体现出对用户的友好，当用户第一次使用咱们的app的时候，欢迎页能体现出咱们app的文化，那么启动页的做用呢？这个就更加剧要了，因为咱们的app要加载许多数据，启动页有一个延迟过程，这个过程给足了app时间去加载数据，用到启动页的app随处可见，好比说微信一启动的那个小人+大地球。

说了这么多，咱们要怎么用程序去实现他呢？其实也很简单，也很不简单。（我接下来分享的这段代码，还有bug，不过基本的功能已经实现）

---

 

//------------------------splashView.js---------------------------------------//

//import liraries
import React, { Component } from 'react'; import { View, Text, StyleSheet,Animated,Dimensions } from 'react-native'; import GetSetStorge from '../utils/GetSetStorge'; const splashImg = require('../assets/guide/loding.png');//加载图片

const { width, height } = Dimensions.get('window'); // create a component
class splashView extends 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(() => { GetSetStorge.getStorgeAsync('isFrist').then((result) => { if (result == null || result == '') { //第一次启动 
                    this.props.navigation.navigate('guideView'); GetSetStorge.setStorgeAsync('isFrist', 'true'); } else { //第二次启动s
                    this.props.navigation.navigate('MyTabNavigator'); } }).catch((error) => { console.log('=========================='); console.log('系统异常' + error); console.log('=========================='); }); }, 1000); } componentWillUpdate = () => { clearTimeout(this.timer); } render() { return ( <Animated.Image style={{ width: width, height: height, transform: [{ scale: this.state.bounceValue }] }} source={splashImg} /> ); } } // define your styles
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#2c3e50', }, }); //make this component available to the app
export default splashView;

//-------------------------------------guideView.js------------------------------------//

import React, { Component } from 'react'; import { Image, ScrollView, StyleSheet, Text, Dimensions, TouchableOpacity } from 'react-native'; let image1 = require('../assets/guide/splash.png'); let image2 = require('../assets/guide/splash.png'); let image3 = require('../assets/guide/splash.png'); const { width, height } = Dimensions.get('window'); export default class guideView extends Component { constructor() { super(); }; render() { return ( <ScrollView contentContainerStyle={styles.contentContainer} bounces={false} pagingEnabled={true} horizontal={true}>
                <Image source={image1} style={styles.backgroundImage} />
                <Image source={image2} style={styles.backgroundImage} />
                <Image source={image3} style={[styles.backgroundImage,styles.btnOut]} >
                    <TouchableOpacity style={styles.btn} onPress={() => { this.props.navigation.navigate('MyTabNavigator'); }} >
                        <Text style={styles.btnText}>启动应用</Text>
                    </TouchableOpacity>
                </Image>
            </ScrollView>); } }; var styles = StyleSheet.create({ contentContainer: { width: width * 3, height: height, }, backgroundImage: { width: width, height: height, }, btnOut:{ alignItems:'center', }, btn:{ width:150, height:50, backgroundColor:'#90ee90', borderRadius:8, justifyContent:'center', alignItems:'center', marginTop:550, }, btnText:{ fontSize:18, color:'#fff' }, });

//------------------------------GetSetStorg.js------------------------------------//

import { AsyncStorage, } from 'react-native'; class GetSetStorge { /** * 异步保存 */ setStorgeAsync(key, value) { return new Promise((resolve, reject) => { AsyncStorage.setItem(key, value, (error) => { if (error) { console.log('=========================='); console.log(`设置${key}失败${error}`); console.log('=========================='); reject(`设置${key}失败${error}`); } else { console.log('=========================='); console.log(`设置${key}成功`); console.log('=========================='); resolve(true); } }); }); } /** * 异步获取 */ getStorgeAsync(key) { return new Promise((resolve, reject) => { AsyncStorage.getItem(key, (error, result) => { if (error) { console.log('=========================='); console.log(`读取${key}失败` + error); console.log('=========================='); reject(`读取${key}失败${error}`); } else { console.log('=========================='); console.log(`读取${key}成功`); console.log('=========================='); resolve(result); } }); }); } } export default new GetSetStorge();

 

 

做者介绍：半路学IT，作开发3年，先就任在一家共享单车公司，作后台开发！

 我开了一个公众号，欢迎各位有志同道合朋友，关注！不按期分享干活，和我得故事！

欢迎关注个人博客，后起有五个开源项目要分享到个人coding.net 和git上去！有问题请加微信：jkxx123321 本人乐于交流！

请随意打赏

 

 

 

(微信扫码)