react-native - 未使用所需变量传递的函数（Expo/React Native）

Question

我试图让按钮在按下后将我导航到主屏幕，但似乎该函数没有变量“导航”，如何将此变量传递给函数？下面是我的代码片段

const LoggedInPage = props => {

  return (
    <View style={styles.container}>
      <Text style={styles.loggedin}>Welcome: {props.name}</Text>
      <Image style={styles.image} source={{ uri: props.photoUrl }} />
      <TouchableOpacity style={styles.button2} onPress={() => this.props.navigation.navigate('Home')}>
        <Text style={styles.buttonText}>Get Started!</Text>
    </TouchableOpacity>

    </View>
  )
}

标签： react-nativeexpo

Answer 1

功能组件中没有 this 绑定；您可以使用 useNavigation 挂钩来获取导航道具。

代码：

const LoggedInPage = ({ name, photoUrl }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Text style={styles.loggedin}>Welcome: {name}</Text>
      <Image style={styles.image} source={{ uri: photoUrl }} />
      <TouchableOpacity style={styles.button2} onPress={() => navigation.navigate('Home')}>
        <Text style={styles.buttonText}>Get Started!</Text>
     </TouchableOpacity>
    </View>
  )
}