使用TabBar反应本机切换屏幕

Question

嘿，我是新来的本地人。

我想使用以下存储库制作一个应用：fluidbottomnavigation作为TabBar。

我实现了它，但是当我按下选项卡时如何切换屏幕？ 我的app.js如下：

const App: () => ReactNode = () => {
  return (
    <>
      <StatusBar />
      <SafeAreaView style={{flex: 0, backgroundColor: 'lightgrey'}} />
      <SafeAreaView style={styles.container}>
        <View style={{flex: 1, backgroundColor: 'lightgrey'}}>

          <TabBar
            onPress={index => {
                alert(index)
            }}
            values={[
              {
                title: '',
                image: require('./assets/home.png'),
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/requests.png'),
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/events.png'),
                default: true,
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/members.png'),
                tintColor: 'black',
              },
              {
                title: '',
                image: require('./assets/account.png'),
                tintColor: 'black',
              },
            ]}
          />
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: 'white',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 50,
  },
});

export default App;

我的屏幕如下：

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

import {Ionicons} from '@expo/vector-icons';

const TabIcon = props => (
  <Ionicons
    name={'md-home'}
    size={35}
    color={props.focused ? 'grey' : 'darkgrey'}
  />
);

export default class ScreenOne extends React.Component {
  static navigationOptions = {
    tabBarIcon: TabIcon,
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen One</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

能帮我吗？我找不到适合的解决方案。还是我很愚蠢...你能解释一下吗？