Question

我正在使用导航来导航我的本机应用程序，但是我无法支付此问题。我做过文档，但对我没有用。

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

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

这与使用(props) => ...和稍后执行props.navegation

相同

您还需要更改onPress功能。除非指定{...}，否则在箭头函数中使用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>),
    });

Answer 2

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

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

navigation.navigate不是函数

2 个答案: