如何在模式回调时刷新 FlatList答案

【问题标题】：How to refresh FlatList on callback of modal如何在模式回调时刷新 FlatList
【发布时间】：2018-02-21 02:19:09
【问题描述】：

我成功地从 Realm 生成了一个 FlatList，没有任何问题。但是，当我在添加新记录后关闭模式屏幕时，数据不会自动刷新（但是在“拉动刷新”之后会自动刷新）。有人可以帮我理解在“HOW_TO_REFRESH”占位符中需要调用什么吗？

平面列表生成：

export default class Accounts extends Component {

  static propTypes = {
    items: PropTypes.arrayOf(PropTypes.shape({
      accountid: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      balance: PropTypes.string.isRequired
    })),

    onDeleteItem: PropTypes.func,
    onRefreshItems: PropTypes.func,
    onSelectItem: PropTypes.func,
    refreshing: PropTypes.bool

  };

  static defaultProps = {
    onDeleteItem: (item) => {
      realm.write(() => {
        realm.delete(realm.objectForPrimaryKey('Account', item.accountid));
      })
    },
    onRefreshItems: () => { console.log('Refresh accounts'); },
    onSelectItem: (item) => { console.log('onSelectItem ', item); },
    refreshing: false
  }

  constructor(props) {
    super(props);

    this.state = ({
      activeRow: null
    });

  }

  renderItem(info, activeRow) {
    return (
        <AccountListItem item={info.item} onPress={() => this.props.onSelectItem(info.item)} />
    );
  }

  render() {

    const listSettings = {
      data: realm.objects('Account'),
      extraData: this.state.activeRow,
      keyExtractor: (item, index) => item.accountid,
      onRefresh: this.props.onRefreshItems,
      refreshing: this.props.refreshing,
      renderItem: (info) => this.renderItem(info, this.state.activeRow)
    };

    return (
      <Container style={styles.container}>
        <Header>
          <Left></Left>
          <Body>
            <Title>Accounts</Title>
          </Body>
          <Right>
            <Button transparent
              onPress={() => this.props.navigation.navigate('AddAccount', {name: 'Accounts', onGoBack: () => HOW_TO_REFRESH})} >
              <Icon name="ios-add" />
            </Button>
          </Right>
        </Header>
        <Container>
          <FlatList {...listSettings} />
        </Container>
      </Container>
    );
  }
}

在我的模态中调用以导航回来：

navigation.goBack();
navigation.state.params.onGoBack();

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

定义你自己的方法

goBack= () => {
    //do code for refresh flatlist
}

在导航时提及它

this.props.navigation.navigate('AddAccount', {name: 'Accounts', onGoBack: () => this.goBack})

【讨论】：

谢谢拉维。我明白怎么调用刷新代码，只是不知道刷新代码是什么。 “// 为刷新平面列表执行代码”部分会包含什么内容？
好的，在这种情况下，只需使用extraData={this.state} 而不是extraData: this.state.activeRow。然后在你的 goBack 方法中调用this.setState({})