react native底部按钮组件

以下是一个React Native底部按钮组件的简单示例，使用了React Native Paper库中的BottomNavigation组件：

import React from 'react';
import { View } from 'react-native';
import { BottomNavigation, Text } from 'react-native-paper';
import { MaterialCommunityIcons } from '@expo/vector-icons';
 
const BottomTabBar = ({ state, descriptors, navigation }) => {
  const focusedOptions = descriptors[state.routes[state.index].key].options;
 
  if (focusedOptions.tabBarVisible === false) {
    return null;
  }
 
  return (
    <View>
      <BottomNavigation
        shifting={false}
        navigationState={state}
        onIndexChange={index => navigation.navigate(state.routes[index].name)}
        renderScene={({ route }) => (
          <Text>{descriptors[route.key].options.tabBarLabel}</Text>
        )}
        renderIcon={({ route, focused }) => (
          <MaterialCommunityIcons
            name={focused ? route.focused : route.unfocused}
            size={24}
            color={focused ? '#2e6ddd' : '#666666'}
          />
        )}
      />
    </View>
  );
};
 
export default BottomTabBar;

这个组件接收state和descriptors作为参数，这些是React Navigation提供的用于描述底部导航状态的对象。它还需要navigation来处理路由的导航。这个组件使用了React Native Paper库的BottomNavigation组件来渲染底部导航栏，并使用MaterialCommunityIcons来渲染图标。这个示例假设你已经安装了@react-navigation/bottom-tabs、react-native-paper和@expo/vector-icons。