react原生如何创建虚拟底部选项卡栏

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class BottomTabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 0, // 当前选中的选项卡索引
    };
  }
}

render() {
  return (
    <View style={styles.container}>
      <View style={styles.tabBar}>
        <Text
          style={[styles.tabItem, this.state.activeTab === 0 && styles.activeTab]}
          onPress={() => this.setState({ activeTab: 0 })}
        >
          Tab 1
        </Text>
        <Text
          style={[styles.tabItem, this.state.activeTab === 1 && styles.activeTab]}
          onPress={() => this.setState({ activeTab: 1 })}
        >
          Tab 2
        </Text>
        <Text
          style={[styles.tabItem, this.state.activeTab === 2 && styles.activeTab]}
          onPress={() => this.setState({ activeTab: 2 })}
        >
          Tab 3
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  tabBar: {
    flexDirection: 'row',
    backgroundColor: '#f2f2f2',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  tabItem: {
    flex: 1,
    paddingVertical: 10,
    textAlign: 'center',
  },
  activeTab: {
    backgroundColor: '#e6e6e6',
  },
});

export default BottomTabBar;