header 如何在 goBack 图标按下时重新渲染组件

Question

我正在尝试在按下 goBack 后重新渲染组件。通过使用 goBack 我可以返回页面，但该页面不会刷新。我该如何解决？在 goBack 之后我必须调用一些 api ，现在在 back non of the function 正在调用之后。我只能在页面刷新或重新呈现时调用。
例如，从第 1 页 header 我单击后退箭头图标（即 goBack 功能）进入第 1 页，进入第 1 页后它应该刷新。

<View style={{ flexDirection: 'row' }} hasSubtitle={!!subtitle}>
            <Left style={{ flexGrow: 1 ,top: -10}}>
              <Button transparent onPress={() => {
                this.props.navigation.goBack();
              }}>
                <Icon name="arrow-back"/>
              </Button>
            </Left>
            <Body
              style={{ textAlign: 'center', width: '100%', flexGrow: 2, alignItems: 'center', justifyContent: 'center' }}>
            {!!title && <Title style={{ color: '#000' }}>{title}</Title>}
            {!!subtitle &&
            <Subtitle style={{ color: '#000' }}>
              {icon && <IconSmall icon={icon} type="MaterialCommunityIcons"/>}
              {subtitle}
            </Subtitle>}
            </Body>
            <Right style={{ flexGrow: 1, marginTop: 2 }}></Right>
          </View>

谢谢

Answer 1

你可以使用react生命周期钩子函数shouldcomponentupdate重新渲染组件。指定更新状态和重新渲染组件的条件。

Answer 2

React Navigation 具有名为 "NavigationEvents" 的事件侦听器组件，可用于了解屏幕何时处于活动状态或非活动状态。

您可以像这样将其实现到您的代码中：

import { NavigationEvents } from 'react-navigation';

<View style={{ flexDirection: 'row' }} hasSubtitle={!!subtitle}>

<NavigationEvents
      // try only this. and your component will auto refresh when this is the active component
      onWillFocus={payload => this.setState({})}
      // other props
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
            <Left style={{ flexGrow: 1 ,top: -10}}>
              <Button transparent onPress={() => {
                this.props.navigation.goBack();
              }}>
                <Icon name="arrow-back"/>
              </Button>
            </Left>
            <Body
              style={{ textAlign: 'center', width: '100%', flexGrow: 2, alignItems: 'center', justifyContent: 'center' }}>
            {!!title && <Title style={{ color: '#000' }}>{title}</Title>}
            {!!subtitle &&
            <Subtitle style={{ color: '#000' }}>
              {icon && <IconSmall icon={icon} type="MaterialCommunityIcons"/>}
              {subtitle}
            </Subtitle>}
            </Body>
            <Right style={{ flexGrow: 1, marginTop: 2 }}></Right>
</View>

NavigationEvents 参考：react-navigation navigation events

Answer 3

您可以将回调函数传递给此组件或页面，然后当您单击按钮返回时，您应该执行此回调函数，这将执行 api 请求！您可以在执行 this.props.navigation.goBack();

之前执行回调

header 如何在 goBack 图标按下时重新渲染组件

How to re render component on goBack icon press in header

javascript

reactjs

react-native