推荐使用：React Native的流体底部导航栏 - FluidBottomNavigation

import React from 'react';
import { View, Text, Image } from 'react-native';
import FluidBottomNavigation from 'react-native-fluid-bottom-navigation';
 
export default class App extends React.Component {
  // 初始化状态
  state = {
    selectedIndex: 0,
  };
 
  // 更新选中的底部导航索引
  selectTab = (index) => {
    this.setState({ selectedIndex: index });
  };
 
  render() {
    const { selectedIndex } = this.state;
 
    return (
      <View style={{ flex: 1 }}>
        {/* 这里可以是你的内容视图 */}
 
        <FluidBottomNavigation
          selectedIndex={selectedIndex}
          onTabSelect={this.selectTab}
          barHeight={50}
          shadow={true}>
          <FluidBottomNavigation.Tab
            title="Home"
            icon={<Image source={require('./images/home.png')} />}
          />
          <FluidBottomNavigation.Tab
            title="Favorites"
            icon={<Image source={require('./images/favorites.png')} />}
          />
          <FluidBottomNavigation.Tab
            title="Settings"
            icon={<Image source={require('./images/settings.png')} />}
          />
        </FluidBottomNavigation>
      </View>
    );
  }
}

这个代码实例展示了如何在React Native应用中使用FluidBottomNavigation库来创建一个流体底部导航栏。代码中定义了三个导航标签，每个标签都有标题和图标，同时展示了如何处理标签的选中状态。