路由特定屏幕后重复弹出 "undefined is not an object (evaluating 'navigation.navigate')"

Question

const ResolvedPlaces = ({navigation}) => {
return(
 <View style={Styles.headerWrapper}>
                <TouchableOpacity navigation={navigation} onPress={()=> navigation.navigate("ProfileScreen")} >
                <Text style={[Styles.header,{fontWeight:"bold"}]}>Resolved </Text> 
                <Text style={Styles.header}> places</Text>
                </TouchableOpacity>
            </View>
)

}

我创建了一个 ResolvedPlaces 函数，并提供了一个路由到配置文件屏幕的选项。我还解构了所有格式的“导航”。但我不断得到这个 navgation.navigate 作为未定义的对象。 the error message on the terminal

Answer 1

如果 ResolvedPlaces 未定义为 react-native-navigation navigator 中的 Screen，则 navigation prop 不会自动传递给组件 ResolvedPlaces。

如果 ResolvedPlaces 嵌套在 Navigator 中定义的 Screen 中，那么您可以直接使用 navigation prop。这可能如下所示。

const SomeScreen = ({navigation}) => {

    const ResolvedPlaces = () => {
        return(
             <View style={Styles.headerWrapper}>
                <TouchableOpacity onPress={()=> navigation.navigate("ProfileScreen")} >
                <Text style={[Styles.header,{fontWeight:"bold"}]}>Resolved </Text> 
                <Text style={Styles.header}> places</Text>
                </TouchableOpacity>
            </View>
          )
       }
  
  return (
      <ResolvedPlaces />
  )
}

组件 SomeScreen 必须在导航器中定义，例如Stack.

如果 ResolvedPlaces 是在其自己的文件中定义的组件，则将 navigation 对象作为来自定义为屏幕的父项的道具传递。

const SomeScreen = ({navigation}) => {
    return <ResolvedPlaces navigation={navigation} />
}

如果这不是一个选项，您仍然可以使用 useNavigation 挂钩，如下所示。

const ResolvedPlaces = () => {

    const navigation = useNavigation()

    return (
        <View style={Styles.headerWrapper}>
                <TouchableOpacity onPress={()=> navigation.navigate("ProfileScreen")} >
                <Text style={[Styles.header,{fontWeight:"bold"}]}>Resolved </Text> 
                <Text style={Styles.header}> places</Text>
                </TouchableOpacity>
            </View>
    )
}

备注： 我已经从 TouchableOpacity 中删除了导航道具，因为该组件不存在该道具。基本 react-native-navigation 结构记录在案 here。

路由特定屏幕后重复弹出 "undefined is not an object (evaluating 'navigation.navigate')"

Repeatedly popping "undefined is not an object (evaluating 'navigation.navigate')" after routing a particular screen

react-native

navigation

react-navigation

onpress

navigateurl