在 2 个屏幕之间反应本机导航

Question

我是本机反应的新手，我不明白为什么它不起作用在我的主文件 App.js 中，我需要一个按钮到 go 到另一个屏幕（AddList.js）所以，在 app.js 中，我有function App (navigation) { const onPressHandler = () => { navigation.navigate('AddList') } return ( <Pressable onPress={onPressHandler}>}

function addList(navigation) { const onPressHandler = () => { navigation.goBack(); } return( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={App} /> <Stack.Screen name="FavProducts" component={FavProducts} />

  </Stack.Navigator>

</NavigationContainer>
)

}

在同一个文件中有 App.js

很抱歉这个问题，感谢您的帮助

我尝试使用 reactnative doc，但没有用

Answer 1

如果您使用@react-navigation/native那么首先您需要创建容器来处理组件 state 然后您必须在堆栈中创建堆栈您需要像这样定义您的屏幕。

import React from 'react';

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import AddList from './components/screens/AddList';

const Stack = createStackNavigator();

const App = () => {

return (
 <NavigationContainer>
  <Stack.Navigator>
   <Stack.Screen
    component={AddList}
    name="AddList"
    options={{ headerShown: false }}
   />
  // define your screens as well
</Stack.Navigator>


</NavigationContainer>
 );
};
export default App;

如果你必须从一个屏幕移动到另一个屏幕，那么导入你的 js 文件，你必须在其中创建点击事件

import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();

并按下按钮

navigation.navigate('AddList')