反复弹出“不确定的不是对象（评估＆＃x27; navigation.navigate;）＆quot;路由特定屏幕后

发布于 2025-01-21 20:34:19 字数 732 浏览 0 评论 0 原文

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>
)

}

我创建了一个分解空间函数，并提供了路由到配置文件屏幕的选项。另外，我以各种格式破坏了“导航”。但是我不断地得到了此导航。驱逐为未定义的对象。终端上的错误消息

原文

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>
)

}

I have created a ResolvedPlaces function and gave a option to route to the profile screen. Also I've destructured the "navigation" in all format. But I continuously got this navgation.navigate as undefined object.
the error message on the terminal

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

轻许诺言 2025-01-28 20:34:19

如果 resolvedplaces 未定义为屏幕在 React-Native-Navigation Navigator 中，则 navigation> navigation prop 将不会自动传递到组件 resolvedplaces 。

如果 resolvedplaces 嵌套在屏幕中，该是在 navigator 中定义的，则可以直接使用 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 对象传递为从父母定义为屏幕的prop。

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 中删除了导航道具，因为此组件不存在此prop。基本 React-Native-Navigation 结构记录在此处。

If ResolvedPlaces is not defined as a Screen in a react-native-navigation navigator, then the navigation prop will not be passed automatically to the component ResolvedPlaces.

If ResolvedPlaces is nested inside a Screen that is defined in a Navigator, then you can use the navigation prop directly. This could look as follows.

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 />
  )
}

The component SomeScreen must be defined in a navigator, e.g. a Stack.

If ResolvedPlaces is a component defined in its own file, then pass the navigation object as a prop from the parent that is defined as a screen.

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

If this is not an option than you can still use the useNavigation hook as follows.

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>
    )
}

Remarks: I have removed the navigation prop from the TouchableOpacity since this prop does not exist for this component. The basic react-native-navigation structure is documented here.