navigation.navigate 不是一个函数

Question

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

问题是我正在尝试使用导航选项添加标题和右键按钮将我导航到另一个屏幕，但它一直给我这个错误：“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. 通常，您使用解构形式直接获取道具的某些属性。在这种情况下，您希望拥有props.navigation.

您可以在箭头函数参数中解构 props 对象，这就是文档所说的，({navigation}) => ...而不是(navigation) => ...

这与 using(props) => ...和 later do是一样的props.navigation

您还需要更改 onPress 函数。{...}除非您指定，否则在箭头函数中使用块不会返回任何内容return。如果你没有用 包裹你的身体功能{...}，那么它和写作是一样的{ return ...}。所以，如果你想 return navigation.navigate('settings')，你必须删除周围的内容{...}或在里面写 return 。

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