推荐一款高效且美观的React Native底部导航栏库 —— `react-native-curved-bottom-bar`

我们可以使用react-native-paper库中的BottomNavigation组件来创建一个效率和美观的底部导航栏。

首先，你需要安装react-native-paper：

npm install react-native-paper

然后，你可以使用如下的代码示例来实现一个效率和美观的底部导航栏：

import React from 'react';
import { View } from 'react-native';
import { BottomNavigation, Text } from 'react-native-paper';
import { MaterialCommunityIcons } from '@expo/vector-icons';
 
const BottomNavBar = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'home', title: 'Home', icon: 'home' },
    { key: 'dashboard', title: 'Dashboard', icon: 'view-dashboard' },
    { key: 'settings', title: 'Settings', icon: 'cog' },
  ]);
 
  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={({ route }) => (
        <View>
          <Text>{route.title}</Text>
        </View>
      )}
      renderIcon={({ color, route }) => (
        <MaterialCommunityIcons name={route.icon} color={color} size={24} />
      )}
    />
  );
};
 
export default BottomNavBar;

这个示例使用了react-native-paper的BottomNavigation组件，并通过routes数组定义了底部导航栏的图标和标题。renderScene属性用于渲染选中标签页的内容，renderIcon属性用于自定义图标的渲染。这个组件效率高，因为它使用了React的hooks来管理状态，而且还支持主题定制，非常适合创建现代化且高效的移动应用界面。