RN 导航栏 tabbar

最新推荐文章于 2024-09-10 05:36:05 发布

原创最新推荐文章于 2024-09-10 05:36:05 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

RN笔记专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了使用React Native进行移动应用开发时，如何通过React Navigation库实现底部标签导航和堆叠导航，包括创建屏幕组件、配置导航选项以及自定义底部标签栏图标。

/**
index.js里边的
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Home from './appfile/Home/Home';
import MyStack from './appfile/Tool/MyStack';

AppRegistry.registerComponent(appName, () => MyStack);
// AppRegistry.registerComponent(appName, () => Home);


/**
MyStack代码
 * Created by y on 2019/10/17.
 */
/* jshint esversion: 6 */
import React from 'react';
import {Image} from 'react-native';
import { createAppContainer} from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import Home from '../Home/Home';
import User from '../User/User';
import MessageList from '../Message/MessageList';
import Login from '../User/Login';
import Regist from '../User/Regist';


const BottomBar1 = createBottomTabNavigator({
    Home: {
        screen:createStackNavigator({
            HomeStack: {
                screen:MessageList,
                navigationOptions:{
                    headerTitle:'首页',
                }
            },
        }),
        navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:(selected)=>{
                return (
                    <Image style={{width:22,height:22}} source={require('../image/zhuye.png')}/>
                )
            }
        }
    }
    ,
    Message: {
        screen:createStackNavigator({
            MessageList: {
                screen:Home,
                navigationOptions:{
                    headerTitle:'服务',
                }
            },
        }),
        navigationOptions:{
            tabBarLabel:'服务',
            tabBarIcon:(selected)=>{
                return (
                    <Image style={{width:22,height:22}} source={require('../image/xiaoxi.png')}/>
                )
            }
        }
    },


    User: {
        screen: createStackNavigator({
            User: {
                screen:User,
                navigationOptions:{
                    headerTitle:'我的',
                }
            },
        }),
        navigationOptions:{
            tabBarLabel:'我的',
            tabBarIcon:(selected)=>{
                return (
                    <Image style={{width:22,height:22}} source={require('../image/yonghu.png')}/>
                )
            }
        }
    }

},{
    initalRouteName:'',
    tabBarOptions: {
        activeTintColor: 'blue',//活动选项卡的标签和图标颜色。
        activeBackgroundColor: 'white',//活动选项卡的背景颜色。
        inactiveTintColor: '#777777',//非活动选项卡的标签和图标颜色。
        inactiveBackgroundColor: 'white',//非活动选项卡的背景颜色。

    }
})




const Stack1 = createStackNavigator({
    BottomBar:{
        screen:BottomBar1,
        navigationOptions: {
            header:null,
        }
    },
    Login: {
        screen:Login,
        navigationOptions: {
            headerTitle:'登录',
            tabBarVisible: false,
        }
    },
    Regist: {
        screen:Regist,
        navigationOptions: {
            headerTitle:'注册',
            tabBarVisible:false,
        }
    }
})

export default createAppContainer(Stack1)