Question

我尝试在goBack press之后重新渲染组件。通过使用goBack，我可以返回上一页，但是该页面没有刷新。我该如何解决？在goBack之后，我必须调用一些api，而在back之后，没有该函数可以调用。我只能在页面刷新或重新显示时才能打电话。
例如，从第1页标题开始，单击后退箭头图标（即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

反应导航具有事件侦听器组件，称为“ 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 2

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

之前执行回调

Answer 3

您可以通过使用反应生命周期挂钩函数shouldcomponentupdate重新渲染组件。指定条件以更新状态并重新呈现组件。

如何在标题中按goBack图标重新渲染组件

3 个答案: