在 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')