如何在 React Native 中将 onPress() 与底部选项卡导航器一起使用？

Question

我在应用程序中使用底部选项卡导航器在屏幕之间导航。我的问题是，在欢迎屏幕上，我添加了两个按钮（不是底部选项卡），我想导航到主屏幕和每个按钮使用 onPress() 函数的说明屏幕。这可以与底部选项卡导航一起使用吗？还是我需要创建一个堆栈导航器？我的想法是我可以使用导航道具导航到主页和说明屏幕，但这不起作用。选项卡本身工作正常，但我不知道如何将设置与我创建的按钮合并。以下是我尝试导航到主屏幕的方法。

const GetStartedButton = ({navigation}) => {    
  return (
    <View>
      <Pressable
        style={style.buttonContainer}
        onPress={() => navigation.navigate('Home')}>
        <Text>
          Get Started
        </Text>
      </Pressable>
    </View>
  );
};

export default GetStartedButton;

标签导航：

const Tab = createBottomTabNavigator();
const MainNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={Welcome}
        options={{
          headerShown: false,
          tabBarIcon: ({size, color}) => <HouseIcon />,
          tabBarInactiveBackgroundColor: '#F1F5F8',
        }}
      />
    </Tab.Navigator>
  );
};

export default MainNavigation;

欢迎页面，按钮为：

import {View, Text} from 'react-native';
import React from 'react';
import GetStartedButton from './GetStartedButton';
import Background from '../../components/Backgrounds/Background';
import lightGlobalStyles from '../../assets/globalStyles/lightGlobalStyles';
import themes from '../../assets/globalStyles/themes';
import {useTheme} from '../../ThemeContext';

import style from './style';
import HowToUse from './HowToUse';

const Welcome = () => {
  const theme = useTheme();
  return (
    <View style={lightGlobalStyles.affirmationContainer}>
      <View style={style.pressablesContainer}>
        <HowToUse />
        <GetStartedButton />
      </View>
      <Background />
    </View>
  );
};

export default Welcome;

Answer 1

Navigation

对象在

GetStartedButton

组件中未定义。将其传递给组件或使用 useNavigation 钩子来访问它。像这样的东西：

<GetStartedButton navigation={navigation}/>

const GetStartedButton = () => {    
  const navigation = useNavigation();
  return (
    <View>
      <Pressable
        onPress={() => navigation.navigate('Home')}>
        <Text>
          Get Started
        </Text>
      </Pressable>
    </View>
  );
};