我有兩個簡單的問題。第一個問題涉及能夠導航到功能螢屏。我在 App.js 中有一堆螢屏。在我的主螢屏中，您可以看到我向用戶詢問位置權限并記錄緯度和經度。我希望能夠從我的主螢屏導航到 Screen1。你可以在下面看到我是如何嘗試這樣做的，我可以用組件來做，但我很困惑如何用函式來做。
我的第二個問題是處理緯度和經度狀態。我想在 Screen1 上訪問這些值。如何將這些狀態傳遞給 screen1 以便能夠顯示它們？
這是下面的代碼以及
應用程式.js
export default function MyTabs() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home">
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
主頁.js
return (
<View style={styles.container}>
<Text style={styles.paragraph}>{latitude}</Text>
<Text style={styles.paragraph}>{longitude}</Text>
<TouchableOpacity onPress={() => navigation.navigate('Screen1')}>
<Text style={styles.paragraph}>Click me to go to screen1</Text>
</TouchableOpacity>
</View>
);
}
Screen1.js
export default function Screen1() {
const [latitude, setLatitude] = useState(null);
const [longitude, setLongitude] = useState(null);
return (
<View style={styles.container}>
<Text style={styles.paragraph}>{latitude}</Text>
<Text style={styles.paragraph}>{longitude}</Text>
</View>
);
}
uj5u.com熱心網友回復：
您的代碼的主要問題是您沒有解構navigation功能組件中的屬性，因此組件中的navigation.navigate('Screen1')操作Home不會做任何事情。
另一個問題是緯度和經度狀態僅在Home組件中，因此也無法從Screen1組件中訪問它們。如果您希望將這些值傳遞給兩個組件，您應該將狀態向上移動到MyTabs組件中。向上移動狀態后，您需要將狀態傳遞props給每個組件，同時還傳遞 Stack Navigator 內置道具。這是一個例子：
<Stack.Screen name="Home" component={(props) => <Home {...props} latitude={latitude} longitude={longitude} />} options={{headerShown: false}}/>
由于您現在在堆疊螢屏中傳遞道具，因此您還需要在子組件中解構它們，如下所示：
export default function Home({ navigation, latitude, longitude }) {
// ... code
我修改了你的零食專案，你可以在這里看到我的作業示例：https ://snack.expo.dev/DTysd-eVa
為您提供一些額外的見解和學習：
確保您花一些時間來了解狀態和道具的基本 React 原則。如果您想從另一個不是直接子組件的組件中的一個組件訪問狀態，則應始終將狀態向上移動到作為它們兩者的父組件的組件，然后將狀態作為道具向下傳遞給每一個。如果你發現自己意識到你想從一個組件的兄弟訪問一個狀態，你應該重新考慮你的邏輯并將狀態向上移動。
React 中另一個很棒的工具是 Context Providers。如果你不熟悉這些，你一定要檢查一下。背景關系提供程式可用于與應用程式中任何位置的組件共享值，這樣您就不必擔心組件層次結構和傳遞狀態作為道具等。但在您的特定情況下，將狀態作為道具傳遞是最合乎邏輯的解決方案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422625.html
標籤：
下一篇：未“授予”權限時打開警報功能