7

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

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

这是我的代码：

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

谢谢你

4

2 回答 2

25

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

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

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

这与 using(props) => ...和稍后做的相同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>),
    });
于 2018-10-20T11:12:49.980 回答
3

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

static navigationOptions = ({navigation}) => { // use {} to object destructuring
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };
于 2019-10-01T11:20:05.703 回答