navigation.navigate 不是函数

Question

我正在使用导航来导航我的 React Native 应用程序，但我无法通过此问题付款。我按照文档做了，但对我没有用。

问题是我正在尝试使用导航选项添加标题和右键以将我导航到另一个屏幕，但它一直给我这个错误：“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) => ...

这与使用(props) => ... 和稍后使用props.navigation 相同

您还需要更改 onPress 功能。在箭头函数中使用{...} 块不会返回任何内容，除非您指定return。如果你没有用{...} 包裹你的body 函数，那么它和写{ 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>),
    });

Answer 2

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

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