如何在 React Native 中使用组件进行导航

Question

我希望使用组件导航到不同的屏幕。我知道我可以简单地在 TouchableOpacity 中为 onPress 传递一个道具，并在每次使用该组件时添加 props.navigation.navigate("") 。但是因为我多次使用这个组件并且目标屏幕一直都是一样的，我希望找到一种方法来做到这一点：（这总是给我这个错误）

<TouchableHighlight
  underlayColor="#F0F3F4"
  style={style.option}
  onPress={() =>
    this.props.navigation.navigate("Change Password")
  }
>
  <Text style={style.optionText}>Other Links</Text>
</TouchableHighlight>

这是我的 Header.js 组件代码的一部分。

Answer 1

您需要在您的 React 应用程序中实现路由器以导航到不同的路线和链接

这里是一个基本示例： https://reactrouter.com/web/example/basic

Answer 2

设计功能组件的最佳方法是使用钩子。

在这种情况下，您需要使用挂钩 useNavigation: https://reactnavigation.org/docs/use-navigation/

const navigation = useNavigation();

<TouchableHighlight
  underlayColor="#F0F3F4"
  style={style.option}
  onPress={() =>
    navigation.navigate("Change Password")
  }
>
  <Text style={style.optionText}>Other Links</Text>
</TouchableHighlight>

如何在 React Native 中使用组件进行导航

how to navigate using a component in react native

react-native

react-navigation