你的位置:首页 > 软件开发 > Java > react native 第一次下载app的欢迎页+每次启动app的启动页设计

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

发布时间:2017-08-21 22:00:27
欢迎各位同学加入:React-Native群:397885169大前端群:544587175大神超多,热情无私帮助解决各种问题。我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app而言很重要,很常见,我先上图,大家看效果! 为什么我们要这么做呢?这体现出对用户的友 ...

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



 欢迎各位同学加入:
React-Native群:397885169
前端群:544587175
大神超多,热情无私帮助解决各种问题。

我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app而言很重要,很常见,我先上图,大家看效果!

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


 

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

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


 

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

//import lirariesimport 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 componentclass 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 stylesconst styles = StyleSheet.create({ container: {  flex: 1,  justifyContent: 'center',  alignItems: 'center',  backgroundColor: '#2c3e50', },});//make this component available to the appexport 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();

 

 

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

 

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

关键词:react

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录