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

2018-06-24 00:01:05来源：未知阅读 ()

欢迎各位同学加入：
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();