React Navigation onPress 函数在自己的 tabBarButton 中？

Question

我是初学者，我需要为 tabBarButton 制作组件，我成功了。

问题是导航现在不起作用，因为我不知道如何编写 onPress 函数以使其起作用！

有人可以帮我解决这个问题吗？

这是我的组件，我在我的Tab.Navigator：

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

interface Props {}

const NavBottomButton: React.FC<Props> = (props) => {
  const {children} = props;

  return (
    <TouchableOpacity onPress={() => {}} style={styles.navButton}>
      <View>
        <Text>{children}</Text>
      </View>
    </TouchableOpacity>
  );
};

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

export default NavBottomButton;

这是我使用组件的方式：

<Tab.Navigator
  tabBarOptions={someStyles}>
  <Tab.Screen
    name="Matches"
    component={Matches}
    options={{
      tabBarButton: (props) => (
        <NavBottomButton onPress={Matches} {...props}>
          {i18n.t('matchesPage.tabTitle')}
        </NavBottomButton>
      ),
    }}
  />
  <Tab.Screen
    name="Groups"
    component={Groups}
    options={{
      tabBarButton: (props) => (
        <NavBottomButton onPress={Groups} {...props}>
          {i18n.t('groupsPage.tabTitle')}
        </NavBottomButton>
      ),
    }}
  />     
</Tab.Navigator>

现在我不知道如何创建onPress函数，TouchableOpacity请帮助我。

Answer 1

这是一个供您使用的工作示例，它可以通过选项访问导航并调用 navigation.navigate。

您可以将相同的 onPress 作为道具传递给自定义组件并在那里使用它

 <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={({ navigation }) => ({
          tabBarButton: (props) => (
            <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
              <Text>Settings</Text>
            </TouchableOpacity>
          ),
        })}
      />
    </Tab.Navigator>