ptomasroos / react-native-scrollable-tab-view

Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
https://www.npmjs.com/package/react-native-scrollable-tab-view
6.93k stars 2.29k forks source link

ScrollableTabView下多个Flatlist,Android数据不刷新 #1174

Open xclidongbo opened 2 years ago

xclidongbo commented 2 years ago

ScrollableTabView下多个Flatlist,Android数据不刷新

  render() {
    const { data, onPressNewsMenu } = this.props;
    console.log("circle render: " + JSON.stringify(data));
    if (data.length === 0) {
      return null;
    }
    return (
      <View style={{ flex: 1, height: 215, width }}>
        <ScrollableTabView
          initialPage={0}
          renderTabBar={() => (
            <ScrollableTabBar
              tabsContainerStyle={{ alignItems: 'center', marginHorizontal: 10 }}
              tabStyle={{ backgroundColor: '#f2f3f6', borderRadius: 15, marginHorizontal: 5, height: 30 }}
              underlineStyle={{ height: 0, borderBottomWidth: 0 }}
            />
          )}
          locked={true}
          tabBarTextStyle={{ fontWeight: 'bold', fontSize: 12 }}
          tabBarBackgroundColor="#fff"
          tabBarActiveTextColor="#5681F9"
          tabBarInactiveTextColor="#B7BBC8"
          tabBarUnderlineStyle={styles.tabBarUnderline}
          onChangeTab={this._onChangeTab}>
          {data.map((item, index) => (
            <View
              ref={(e) => (this.children[index] = e)}
              style={styles.tabView}
              tabLabel={item.applicationName}
              key={item.id}>
              <FlatList
                listKey={item.id}
                key={item.id}
                data={item.data}
                extraData={item.data}
                renderItem={this.renderSubView}
                onEndReachedThreshold={0.1}
                keyExtractor={this._extraUniqueKey}
              />
            </View>
          ))}
        </ScrollableTabView>
      </View>
    )
  }