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 本人乐于交流!

请随意打赏

 

 

 

(微信扫码)

 

posted @ 2017-08-21 21:01 topbrids 阅读(...) 评论(...) 编辑 收藏

优秀bolg推荐→

兔子收集ReactNative || React native 项目进阶(redux, redux saga, redux logger) || dnc开源 || 少停 || Nginx || Vue || 跟谁学 || servicestack || 讲了一篇很好的关于.net core 在 centos上的部署 || Jexus || net core nginx || Songlcy--ReactNative--github || Songlcy--ReactNative || React-后台管理系统 || 情书哥-简书 || MobX || TypeScript 官网 || antd-蚂蚁金服 || android

net 音视频大牛|| 鬼哥-定时任务 || dotnetcore-linux大本营 || 林德熙 || net core sruging微服务

net core1.0书作者blog || net core spa 单页面 || .net core 区块链项目-NEO || msdn 社区 || mongoose || 反古仔

Eth以太坊 || 懒得安分--net大牛 || docker || MQ

徐老大GITHUB ||徐老大coding ||蓝灯 || Echart