Передать функцию в компонент headerTitle React Navigation

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

Поскольку вы используете react-navigation, тогда вы устанавливаете функцию в компоненте заголовка.

1. Вы должны определить функцию в своем классе
2. В вашем componentDidMount установите функцию в качестве параметра, используя setParam
3. Используйте 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

Подробнее о настройке функций вы можете прочитать в заголовке навигации здесь