Question

我正在尝试实现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() {

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

Answer 1

在使用PreferredDataLocation时，这就是在标头组件中设置函数的方式。

您必须在您的类中定义函数
在您的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

传递的函数

这是展示基本功能https://snack.expo.io/@andypandy/functions-in-a-navigation-header

的小吃

您可以在导航标题here

中了解有关设置功能的更多信息。

Answer 2

在您的组件中确实使用了以下箭头功能，并且在组件首次安装时不会调用该功能。

componentDidMount() {
    this.props.navigation.setParams({ handleDelete: (() => this.handleDelete()) 
});

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

2 个答案: