在 React Native 中点击按钮时导航到另一个屏幕

Question

我是 React Native 的新手，我想在点击按钮时打开另一个屏幕，我想显示的屏幕已经创建。我使用 TouchableOpacity 作为我的按钮，并在“onPress”道具上使用导航。我的应用程序已经在使用 Stack navigator 和 Tab navigator，所以我已经安装了这些包。

我已经尝试过了，但出现错误“undefined is not an object (evaluating 'navigation.navigate')”

请帮忙。

在我显示按钮的屏幕中：

const myWebview = ({ navigation }) => {
  return (
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("NewListingScreen")}
        >
          <Text style={{ color: "#ffffff", fontWeight: "bold" }}>
            My Button Title
          </Text>
        </TouchableOpacity>
      </View>
  );
};

在我的标签导航器上（屏幕工作正常）：

<Tab.Screen
        name={routes.newListingScreen}
        component={NewListingScreen}
        options={({ navigation }) => ({
          tabBarButton: () => (
            <NewListingButton
              onPress={() => {
                navigation.navigate(routes.newListingScreen);
                dispatch({
                  type: "SET_NEW_LISTING_SCREEN",
                  newListingScreen: true,
                });
              }}
            />
          ),
          tabBarVisible: !user,
        })}
      />

当我使用const navigation = useNavigation();

我收到这个错误：

Answer 1

我的第一个猜测是 navigation 对象本身在 undefined 此处。导航道具在屏幕上是 only available。 -

const myWebview = ({ navigation }) => {

使用 hooks 是将导航对象传递给子组件的更好选择。

import { useNavigation } from '@react-navigation/native';

function NotificationsScreen() {
const navigation = useNavigation(); 
return(
 ...
  <TouchableOpacity
     style={styles.button}
     onPress={() => navigation.navigate('NewListingScreen')}
  >
 ...
);
}

在 React Native 中点击按钮时导航到另一个屏幕

Navigating to another Screen when a button is tapped in React Native

javascript

reactjs

react-native