react native 第一次下載app的歡迎頁+每次啓動app的啓動頁設計

時間 2019-12-20

標籤 react native 第一次下載 app 歡迎每次啓動設計欄目 React 简体版

原文原文鏈接

歡迎各位同窗加入：
React-Native羣：397885169
大前端羣：544587175
大神超多，熱情無私幫助解決各類問題。前端

我想我寫的這篇博文能夠幫助到不少人，接下來要分享的東西，對app而言很重要，很常見，我先上圖，你們看效果！react

爲何咱們要這麼作呢？這體現出對用戶的友好，當用戶第一次使用咱們的app的時候，歡迎頁能體現出咱們app的文化，那麼啓動頁的做用呢？這個就更加劇要了，因爲咱們的app要加載許多數據，啓動頁有一個延遲過程，這個過程給足了app時間去加載數據，用到啓動頁的app隨處可見，好比說微信一啓動的那個小人+大地球。git

說了這麼多，咱們要怎麼用程序去實現他呢？其實也很簡單，也很不簡單。（我接下來分享的這段代碼，還有bug，不過基本的功能已經實現）react-native

//------------------------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------------------------------------//app

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();