navigation.navigate 不是函数

Question

我正在使用导航来导航我的 React 本机应用程序，但我无法通过 Paypass 这个问题。我按照文档做了，但对我没有用。

问题是我正在尝试使用导航选项添加 header 和右键将我导航到另一个屏幕，但它一直给我这个错误：“navigation.navigate is不是函数。（在 navigation.navigate 中未定义）

这是我的代码：

    static navigationOptions = (navigation) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };

谢谢

Answer 1

这是 React 的一个常见问题，特别是当您不了解最新的 JS 标准（例如 React 使用的 ES6）时。

所以，你的问题是概念性的。 React 组件收到一个名为 props 的 object，其中包含所有 props。通常，您使用解构形式直接获取道具的某些属性。在这种情况下，您想要 props.navigation.

您可以解构箭头函数参数中的道具 object，这就是文档所说的，使用 ({navigation}) => ... 而不是 (navigation) => ...

这与使用 (props) => ... 相同，之后使用 props.navigation

您还需要更改您的 onPress 函数。在箭头函数中使用 {...} 块不会 return 任何东西，除非你指定 return。如果你没有用 {...} 环绕你的 body 函数，那么它与写 { return ...} 是一样的。所以，如果要returnnavigation.navigate('settings')，就得把周围的{...}删掉，或者在里面写return

    static navigationOptions = ({navigation}) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=> navigation.navigate('settings')}>Settings</Title>)
        };
    };

此外，您可以对导航选项功能执行相同的操作：

    static navigationOptions = ({navigation}) => ({
        title: 'Review Jobs',
        headerRight: (<Title onPress={() => navigation.navigate('settings')}> Settings </Title>),
    });

Answer 2

在接收参数时使用对象解构：

static navigationOptions = ({navigation}) => { // use {} to object destructuring
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };

Answer 3

您缺少 {} 导航

static navigationOptions = ( {navigation} ) => {
  return {
    title: 'Review Jobs',
    headerRight: (<Title onPress={() => { navigation.navigate('settings') }}>Settings</Title>)
  };
};

navigation.navigate 不是函数

navigation.navigate is not a function

react-native

react-navigation-stack