React Native 创建 Material Bottom Tab Navigator

17 Mar 2025 | 阅读 2 分钟

Material 风格为屏幕底部的标签栏提供了额外的设计效果。 Material Design 使您可以在不同的屏幕之间切换。标签屏幕组件在屏幕首次聚焦之前不会被挂载。

要使用 Material Design 导航器，请安装 react-navigation-material-bottom-tabs 库，如下所示

此库使用 react-native-paper 中的 BottomNavigation 组件。

还需要安装 react-native-vector-icons。

createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);

创建 Material Bottom Tab 导航的示例

在此示例中，我们实现 Material Bottom Tab Navigator 以突出显示活动选项卡的图标及其标题。剩余的标签仅显示图标，没有标题。要使用 Material 设计，请从 react-navigation-material-bottom-tabs 库中导入 createMaterialBottomTabNavigator 函数。

App.js

import React from 'react';
import {StyleSheet, Text, View,Button} from 'react-native';
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Home Screen</Text>
        </View>
    );
  }
}
class ProfileScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Profile Screen</Text>
        </View>
    );
  }
}
class ImageScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Image Screen</Text>
            </View>
        );
    }
}
class CartScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Cart Screen</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});
const TabNavigator = createMaterialBottomTabNavigator(
    {
        Home: { screen: HomeScreen,
            navigationOptions:{
                tabBarLabel:'Home',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>
                    </View>),
            }
        },
        Profile: { screen: ProfileScreen,
            navigationOptions:{
                tabBarLabel:'Profile',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>
                    </View>),
                activeColor: '#f60c0d',
                inactiveColor: '#f65a22',
                barStyle: { backgroundColor: '#f69b31' },
            }
        },
        Image: { screen: ImageScreen,
            navigationOptions:{
                tabBarLabel:'History',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-images'}/>
                    </View>),
                activeColor: '#615af6',
                inactiveColor: '#46f6d7',
                barStyle: { backgroundColor: '#67baf6' },
            }
        },
        Cart: {
            screen: CartScreen,
            navigationOptions:{
                tabBarLabel:'Cart',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-cart'}/>
                    </View>),
            }
        },
    },
    {
      initialRouteName: "Home",
      activeColor: '#f0edf6',
      inactiveColor: '#226557',
      barStyle: { backgroundColor: '#3BAD87' },
    },
);

export default createAppContainer(TabNavigator);

输出