react-native - react native : Undefined is not object (evaluating 'navigation.navigate' )

Question

我在 React Native 上使用自定义抽屉。我有 3 个底部选项卡导航器。聊天、主页和个人资料选项卡。然后在主页上我创建了一些框，如果单击框，它将导航到另一个 View 。

这是我在按下主页导航时调用的 MenuHome 组件。

const MenuHome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity
          style={styles.box}
          onPress={() => navigation.navigate('CashBank')}
       >
       <View style={styles.inner}>
         <Text style={styles.titleText}>CASH BANK</Text>
       </View>
      </TouchableOpacity>
    </View>
  )
}

然后我在 Home 组件上导入 MenuHome。

const Home = ({ navigation }) => {
  return (
    <View>
      <MenuHome />
    </View>
  )
}

我一直在创建 CashBank 组件，但我得到错误 Undefined is not object (evaluating 'navigation.navigate')

Answer 1

您的 MenuHome 组件将导航作为 prop，因此您必须将导航对象传递给它

const Home = ({ navigation }) => {
      return (
        <View>
          <MenuHome navigation={navigation} />
        </View>
      )
    }

另一种解决方案是在 MenuHome 组件中使用库提供的钩子(Hook)

import {useNavigation} from '@react-navigation/native';
const MenuHome = () => {
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <TouchableOpacity
          style={styles.box}
          onPress={() => navigation.navigate('CashBank')}
       >
       <View style={styles.inner}>
         <Text style={styles.titleText}>CASH BANK</Text>
       </View>
      </TouchableOpacity>
    </View>
  )
}