代码之家  ›  专栏  ›  技术社区  ›  bgeveritt

如何在modal回调时刷新平面列表

  •  0
  • bgeveritt  · 技术社区  · 8 年前

    我正在成功地从领域生成一个没有问题的平面列表。但是,当我在添加新记录后关闭模式屏幕时,数据不会自动刷新(但在“拉入刷新”后会自动刷新)。有人能帮我理解“HOW\u to\u 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();
    
    1 回复  |  直到 8 年前
        1
  •  0
  •   Ravi    8 年前

    定义自己的方法

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

    在导航时提及它

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