Question

React Native：未定义不是对象（评估“navigation.navigate”）

2021-11-09

100

react-native

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

这是我在按下主页导航时调用的 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 组件中库提供的钩子

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