gpt4 book ai didi

javascript - 如何在React中使用HOC传递静态navigationOptions?

转载 作者:行者123 更新时间:2023-12-02 22:55:45 25 4
gpt4 key购买 nike

我想创建一个 HOC 将 navigationOptions 传递给传递的组件。

const withNavigationOptions = Component => ({ ...props }) => {
const ComponentWithNavigation = Component;
ComponentWithNavigation.navigationOptions = ({ navigation }) => {
const { title } = navigation.state.params;
return {
header: (
<Navbar
navigation={navigation}
title={title}
onBackPress={() => navigation.navigate('Dashboard')}
/>
)
};
};

return <ComponentWithNavigation {...props} />;
};

export default withNavigationOptions;

但是静态选项没有被分配给返回的组件。任何帮助将不胜感激。

最佳答案

将 navigationOptions 传递给渲染组件的正确方法是将其作为 props 传递。

const withNavigationOptions = Component => ({ ...props }) => {
const ComponentWithNavigation = Component;
const navigationOptions = ({ navigation }) => {
const { title } = navigation.state.params;
return {
header: (
<Navbar
navigation={navigation}
title={title}
onBackPress={() => navigation.navigate('Dashboard')}
/>
)
};
};

return <ComponentWithNavigation {...props} navigationOptions={navigationOptions} />;
};

export default withNavigationOptions;

在您的情况下,静态选项不会提供给返回的组件,因为您将其添加到呈现的组件而不是返回的功能组件上。

关于javascript - 如何在React中使用HOC传递静态navigationOptions?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57985478/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com