react-native - navigation.navigate 不是一个函数

Question

我正在使用导航来导航我的 native 应用程序，但我无法支付此问题。我按照文档做了，但对我没有任何作用。

问题是我正在尝试使用导航选项添加标题和右键按钮将我导航到另一个屏幕，但它一直给我这个错误:“navigation.navigate 不是一个函数。(在 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 , 包含所有 props .通常，您使用解构形式直接获取 Prop 的某些属性。在这种情况下，您希望拥有 props.navigation .
您可以使用 ({navigation}) => ... 解构箭头函数参数中的 props 对象，这就是文档所说的。而不是 (navigation) => ...这与使用 (props) => ... 相同以后做 props.navigation您还需要更改 onPress 函数。使用 {...}除非您指定 return，否则箭头函数中的块将不会返回任何内容.如果你没有用 {...} 来包裹你的 body 功能, 那么就和写 { return ...} 一样.所以，如果你想返回 navigation.navigate('settings') ，你要删除周围的{...}或者在里面写回车。

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

此外，您可以对您的 navigationOptions 函数执行相同操作:

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