Question

我正在开发一个react native应用程序，我在其中使用了适用于Android和iOS的Segmented控制选项卡。我正在将这个github组件用于分段选项卡https://www.npmjs.com/package/react-native-segmented-control-tab

这是我的代码示例： -

<View>
    <SegmentedControlTab
      values={['Tab 1', 'Tab 2']}
      selectedIndex={this.state.selectedIndex}
      onTabPress={this.handleIndexChange}
    />
    <SearchBox
      placeholder={this.state.selectedIndex === 0 ? 'Tab 1' : 'Tab 2'}
      onFilterChange={this.onFilterChange}
      filterPress={this.filterPress}
    />
    { this.state.selectedIndex === 0 ?
      <ListView
        style={styles.list}
        dataSource={this.state.dataSource}
        renderRow={user => (
          <UserListRow
            {...{ user }}
          />)}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => this._onRefresh()}
          />
        }
         onEndReached={() => this._onEndReached()}
         onEndReachedThreshold={10}
        enableEmptySections={true}
      />
    :
      <ListView
        style={styles.list}
        dataSource={this.state.dataSourceJobs}
        renderRow={job => (
          <JobListRow
            {...{ job }}
          />
        )}
        refreshControl={
          <RefreshControl
            refreshing={false}
            onRefresh={() => this._onRefresh()}
          />
      }
       onEndReached={() => this._onEndReached()}
       onEndReachedThreshold={10}
        enableEmptySections={true}
      />
    }
  </View>

在我不滚动Tab 1 OR Tab 2之前，一切正常。向下滚动以进行分页时，数据会重叠。例如，Tab 1内的数据移至Tab 2，反之亦然。

我使用下面的代码来更新列表视图的dataSource。

componentWillReceiveProps({ data }) {
  this.updateDataSource(data.tab1); 
  this.updateDataSourceJobs(data.tab2); 
}

以下是其他一些使用方法： -

updateDataSource(users) {
this._data = _.uniqBy(this._data.concat(users.toJS()), 'id');
this.setState({
  dataSource: this.state.dataSource.cloneWithRows(
    this._data
  )
});
}

updateDataSourceJobs(jobs) {
this._jobData = _.uniqBy(this._jobData.concat(jobs.toJS()), 'id');
this.setState({
  dataSourceJobs: this.state.dataSourceJobs.cloneWithRows(
    this._jobData
  ),
});
}

我无法理解分段控制选项卡或列表视图的问题。此外，如果我滚动Tab 1，其他选项卡也会滚动。任何帮助将不胜感激！

带有多个列表视图重叠数据的分段控制选项卡

0 个答案: