我正在尝试实现一个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
时,这就是您在标头组件中设置函数的方法。
componentDidMount
中使用setParam
将函数设置为参数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中阅读有关设置功能的更多信息
在您的组件中,挂载使用如下所示的箭头函数,并且在组件首次安装时不会调用该函数。
componentDidMount() {
this.props.navigation.setParams({ handleDelete: (() => this.handleDelete())
});