在 React Native 中使用 react-navigation 創建帶有道具的導航按鈕

Question

我正在嘗試創建一個可以幫助我在堆棧之間導航的組件按鈕。 我使用 react-navigation 在應用程序中導航。 問題是我有3個文件：

-App.js

<SafeAreaProvider>
  <StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Accueil">
      <Stack.Screen name="Accueil" component={AccueilScreen} options={{headerShown: false}}/>
      <Stack.Screen name="Progression" component={ProgressionScreen} />
      <Stack.Screen name="Themes" component={ThemesScreen} />
      <Stack.Screen name="Quizz" component={QuizzScreen} />
    </Stack.Navigator>
  </NavigationContainer>
</SafeAreaProvider>

-Accueil.js

function Accueil({ navigation }) {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content_container}>
        <Image style={styles.logo} source={require('../assets/logo.jpg')} />
        <Button buttonText="Progression" navigation={navigation}/>
      </View>
   </SafeAreaView>
  )
}

-Button.js

export default function Button(props, navigation) {
  return (
    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate(props.buttonText)}>
      <Text style={styles.button_text}>{props.buttonText}</Text>
    </TouchableOpacity>
  )
}

我的問題是我不能讓 navigation.navigate 在 Button 組件中工作，而當我將它直接放在 Accueil.js 文件中時它完全可以工作。

你能幫助我嗎？

Answer 1

navigation是Button組件中props的一部分

export default function Button({ navigation, ...props }) {
  return (
    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate(props.buttonText)}>
      <Text style={styles.button_text}>{props.buttonText}</Text>
    </TouchableOpacity>
  )
}

你也可以這樣做：

export default function Button(props) {
  const { navigation } = props
  ...rest of your code