如何在 React Native 中创建自定义 TabBar

在 React Native 中，TabBar 是一个常见的组件，可以让用户在不同的页面之间切换。然而，React Native 默认提供的 TabBar 可能无法满足我们的需求，这时就需要我们自己创建一个自定义的 TabBar。

本文将介绍如何在 React Native 中创建自定义 TabBar，并提供详细的步骤和示例代码。

步骤

第一步：创建 TabBar 组件

首先，我们需要创建一个 TabBar 组件，用于显示不同的页面。可以使用 React Native 中的 TouchableOpacity 组件来实现点击切换页面的功能。

// javascriptcn.com 代码示例
import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';

const TabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.container}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel !== undefined ? options.tabBarLabel : options.title !== undefined ? options.title : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={[styles.tabButton, isFocused && styles.tabButtonFocused]}
          >
            <Text style={[styles.tabLabel, isFocused && styles.tabLabelFocused]}>{label}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 50,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  tabButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabButtonFocused: {
    backgroundColor: '#f5f5f5',
  },
  tabLabel: {
    fontSize: 14,
    color: '#666',
  },
  tabLabelFocused: {
    color: '#333',
  },
});

export default TabBar;

第二步：在导航器中使用 TabBar 组件

接下来，我们需要在导航器中使用自定义的 TabBar 组件。可以使用 tabBar 选项来指定自定义的 TabBar 组件。

// javascriptcn.com 代码示例
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBar from './TabBar';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={props => <TabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

至此，我们已经成功创建了一个自定义的 TabBar 组件，并在导航器中使用了它。

示例代码

完整的示例代码如下：

// javascriptcn.com 代码示例
import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const TabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.container}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel !== undefined ? options.tabBarLabel : options.title !== undefined ? options.title : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={[styles.tabButton, isFocused && styles.tabButtonFocused]}
          >
            <Text style={[styles.tabLabel, isFocused && styles.tabLabelFocused]}>{label}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 50,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  tabButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabButtonFocused: {
    backgroundColor: '#f5f5f5',
  },
  tabLabel: {
    fontSize: 14,
    color: '#666',
  },
  tabLabelFocused: {
    color: '#333',
  },
});

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

const ProfileScreen = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
};

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={props => <TabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

总结

本文介绍了如何在 React Native 中创建自定义 TabBar，并提供了详细的步骤和示例代码。通过自定义 TabBar，我们可以更好地满足用户的需求，提高应用的用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6573252bd2f5e1655dc4612f