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

Z时代
2024-01-10
分类：综合

react

1：目录

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',
    }
});