React-Native之引导页跳转到主页

ゝ一纸荒年。 2022-05-22 06:06 271阅读 0赞

# 1：目录 #

![70][]

# 2：App.js页 #

import {AppStackNavigator} from "./navigations/AppNavigators";
    export default AppStackNavigator;

# 3：AppTabNavigators.js（导航页） #

import React from 'react';
    import {
        createStackNavigator,
        createTabNavigator,
        createDrawerNavigator,
    } from 'react-navigation';
    
    import Ionicons from 'react-native-vector-icons/Ionicons';
    
    
    import Welcome from '../js/pages/WelcomPage';
    
    
    
    import Page1 from '../js/pages/Page1';
    import Page2 from '../js/pages/Page2';
    import Page3 from '../js/pages/Page3';
    
    
    
    //底部导航
     const AppTabNavigators =createTabNavigator({
        Page1: {
            screen:Page1,
            navigationOptions: {
                tabBarLabel: 'page1',//底部标题
                tabBarIcon: (({tintColor, focused}) => (//底部图标
                   <Ionicons
                        name={focused?'ios-home':'ios-home-outline'}
                        size={
      26}
                        style={
      {
      color:tintColor}}
                   />
                ))
            },
    
        },
        Page2:{
            screen:Page2,
            navigationOptions:{
                tabBarLabel: 'page2',
                tabBarIcon: (({tintColor, focused}) => (
                    <Ionicons
                        name={focused?'ios-people':'ios-people-outline'}
                        size={
      26}
                        style={
      {
      color:tintColor}}
                    />
                ))
    
            }
        },
        Page3:{
            screen:Page3,
            navigationOptions:{
                tabBarLabel: 'page3',
                tabBarIcon: (({tintColor, focused}) => (
                    <Ionicons
                        name={focused?'ios-clock':'ios-clock-outline'}
                        size={
      26}
                        style={
      {
      color:tintColor}}
                    />
                ))
    
            }
        }
    
    },{
        tabBarPosition:'bottom',//位置
        tabBarOptions: {
            showIcon: true,//是否显示图标！！！！！！！
            style: {
                height: 45,//底部导航的宽度
                backgroundColor: '#211305',//底部导航的颜色
            },
            labelStyle: {
                fontSize: 12,//字体大小
                marginTop:-2,//字体距离图标大小
            },
    
        }
    
    });
    
    
    
    //顶部导航，主入口，要放在其他导航后面，（加载顺序）
    export const AppStackNavigator=createStackNavigator({
        Welcome:{
          screen:Welcome,
          navigationOptions:{
              header:null,
          }
        },
        HomeTab:{
      //底部导航（也是主页）
            screen:AppTabNavigators,
            navigationOptions:{
                header:null,
            }
        }
    
    } );

# 4：welcom.js(引导页) #

import React, { Component } from 'react'
    import {
        View,
        Image,
        Dimensions,
        StyleSheet
    } from 'react-native'
    import Swiper from 'react-native-swiper';
    
    const { width, height } = Dimensions.get('window');//获取手机的宽和高
    
    const styles =StyleSheet.create( {
        wrapper: {
    
        },
        container: {
            flex: 1,//必写
        },
        image: {
            width,//等于width:width
            height,
        }
    });
    
    export default class WelcomPage extends Component {
        //加载计时器
        componentDidMount(){
            this.timer=setTimeout(()=>{
                this.props.navigation.navigate('HomeTab');//7秒后进入底部导航主页
            },7000)
        }
        //卸载计时器
        componentWillUnmount(){
            this.timer&&clearTimeout(this.timer);//同时为真的才执行卸载
        }
        render () {
            return (
                <View style={styles.container}>
                    <Swiper style={styles.wrapper}
                            showsButtons={
      true}       //为false时不显示控制按钮
                            paginationStyle={
      {      //小圆点位置
                                bottom: 70
                            }}
                            loop={
      false}        //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
                            autoplay={
      true}          //自动轮播
                            autoplayTimeout={
      2}      //每隔2秒切换
                    >
    
                        <Image style={styles.image} source={require('../../images/1.jpg')}/>
                        <Image style={styles.image} source={require('../../images/2.jpg')}/>
                        <Image style={styles.image} source={require('../../images/4.jpg')}/>
    
                    </Swiper>
                </View>
            )
        }
    }

# 5：page1,page2,page3页 #

import React, { Component } from 'react';
    import {
        StyleSheet,
        Text,
        View,
        Button,
    } from 'react-native';
    
    
    
    type Props = {};
    export default class Page2 extends Component<Props> {
    
        render() {
            const {navigation}=this.props;
            return (
                <View style={styles.container}>
                    <Text>欢迎来到page3</Text>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#ffffaa',
        }
    });

# 6：效果（引导完成后跳到主页） #

![70 1][]![70 2][]

[70]: /images/20220522/f361b51b92164ce2b9b0eeb40846439c.png
[70 1]: https://img-blog.csdn.net/20180617141004853?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220522/d66f2d1a0064458296e8575bac29dbde.png