gpt4 book ai didi

reactjs - 将函数传递到 React Navigation 的 headerTitle 组件中

转载 作者:行者123 更新时间:2023-12-02 16:27:20 25 4
gpt4 key购买 nike

我正在尝试实现一个deletePost按钮,但我很难将它传递到我的标题组件中。这是

export class PostScreen extends Component {


// Custom headerTitle component.
static navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
return { headerTitle: <PostTitle {...params} handleDelete={this.handleDelete}/> }
};

handleDelete = async (id) => {
const { deletePost } = this.props;
const token = await AsyncStorage.getItem('token');
deletePost(token, id);
}

render() {

这似乎不是传递它的正确方法。正确的方法是什么?我在文档中找不到任何内容。

最佳答案

当您使用 react-navigation 时,这就是您在 header 组件中设置函数的方式。

  1. 您必须在类中定义该函数
  2. componentDidMount 中使用 setParam 将函数设置为参数
  3. 在导航 header 中使用 getParam

这就是一个非常简单的组件的样子。

export default class Screen1 extends React.Component {

static navigationOptions = ({ navigation }) => {
const { params } = navigation.state; // this is included because you had added it and you may require the params in your component
return {
headerTitle: <PostTitle {...params} handleDelete={navigation.getParam('handleDelete')} />, // grab the function using getParam
};
};

handleDelete = () => {
alert('delete')
}

// set the function as a param in your componentDidMount
componentDidMount() {
this.props.navigation.setParams({ handleDelete: this.handleDelete });
}


render() {
return (
<View style={styles.container}>
<Text>Screen1</Text>
</View>
)
}
}

然后在您的 PostTitle 组件中,您可以通过调用 this.props.handleDelete 使用刚刚传递的函数

这是一个显示基本功能的小吃 https://snack.expo.io/@andypandy/functions-in-a-navigation-header

您可以在导航标题here中阅读有关设置功能的更多信息。

关于reactjs - 将函数传递到 React Navigation 的 headerTitle 组件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55008102/

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