ScrollView 中包裹的多个 FlatList

Question

我正在尝试在全局滚动视图中使用 flatlist，但是，我为每个 FlatList 列出了 300 多个项目。因此，屏幕变得非常缓慢，要按下另一个按钮，我需要等待大约 30 秒才能导航到另一个组件。

我尝试使用 onEndReached.. 在不同的平面列表上，但是，我使它们不可滚动，因为所有这些的融合形成了一种网格。使用页面系统也不起作用。我能做的最好的事情是继续使用滚动视图加载 FlatList 项目（如果我滚动它，然后加载一些其他结果......）。但我真的不知道如何实现它。

这是包含所有 FlatList 的整个滚动视图：

<ScrollView refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
              />
            }>
              <View style={styles.scrollContainer}>
                    <View style={styles.headerView}>
                      <Icon name="stack-overflow" style={styles.titleIcon}/>
                      <Text style={{fontSize:20, marginTop:15, marginLeft:13}}>{I18n.t("ingHeadText")}</Text>
                      <TouchableHighlight style={{position: 'absolute', right:30}} onPress={() => this.props.navigation.navigate('CreateProduct')}>
                        <Icon name="plus" style={[styles.titleIcon, {color:'#2578cf', fontSize: 25}]}/>
                      </TouchableHighlight>
                    </View>
                    <View style={styles.orderList}>
                      <ScrollView horizontal={true}>
                        <View style={styles.columnView}>
                          <View style={[styles.columnHeader, {width:125}]}>
                            <Text style={{ fontWeight: 'bold' }}>{I18n.t("ingBoardNomHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                              <View style={[styles.columnRow, {width:125}]}>
                                <Text>
                                  {`${item.product_name} `}
                                </Text>
                              </View>
                            </TouchableHighlight>}
                            scrollEnabled={false}
                          />
                        </View>


                        <View style={styles.columnView}>
                          <View style={styles.columnHeader}>
                            <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("ingBoardLstBuHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                              <View style={styles.columnRow}>
                                <Text style={{textAlign: 'center'}}>
                                  {`${(item.last_prix|| '')} `}
                                </Text>
                              </View>
                            </TouchableHighlight>}
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={styles.columnView}>
                          <View style={styles.columnHeader}>
                              <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("ingBoardUnitHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                              <View style={styles.columnRow}>
                                <Text style={{textAlign: 'left'}}>
                                  {`${(item.unite||'')} `}
                                </Text>
                              </View>
                            </TouchableHighlight>}
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={styles.columnView}>
                          <View style={styles.columnHeader}>
                              <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("ingBoardCateHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                              <View style={styles.columnRow}>
                                <Text style={{textAlign: 'left'}}>
                                  {`${(item.category||'')} `}
                                </Text>
                              </View>
                            </TouchableHighlight>}
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={styles.columnView}>
                          <View style={styles.columnHeader}>
                              <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("ingBoardRecHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) => {
                              if(item.avail != null){
                                return(<TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                                  <View style={styles.columnRow}>
                                    <Icon name="checkbox-marked-circle" style={{color: '#19C44B', fontSize:16, textAlign:'center'}}/>
                                  </View>
                                </TouchableHighlight>);
                              } else {
                                <TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                                  <View style={styles.columnRow}>
                                  </View>
                                </TouchableHighlight>
                              }

                            }}
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={styles.columnView}>
                          <View style={[styles.columnHeader, {width:125}]}>
                              <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("ingBoardComHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('Commandes')} underlayColor="white">
                              <View style={[styles.columnRow, {width:125}]}>
                                <Text style={{textAlign: 'left', color: item.couleur}}>
                                  {`${(item.etat_commande||'')} `}
                                </Text>
                              </View>
                            </TouchableHighlight>}
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={styles.columnView}>
                          <View style={[styles.columnHeader, {width:125}]}>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <View style={[styles.columnRow, {width:125}]}>
                                <Button primary style={styles.orderButton} onPress={() => this.props.navigation.navigate('OrderProduct', {productId: item.product_id, productName: item.product_name})}>
                                  <Text style={styles.orderText}>{I18n.t("ordIngComBtn")}</Text>
                                </Button>
                              </View>
                            }
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={styles.columnView}>
                          <View style={styles.columnHeader}>
                              <Text style={{ fontWeight: 'bold', textAlign: 'center' }}>{I18n.t("ingBoardRupHead")}</Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) => {
                              if(item.rupture != null){
                                return(<TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                                  <View style={styles.columnRow}>
                                    <Icon name="alert-circle" style={{color: '#CC0000', fontSize:16, textAlign:'center'}}/>
                                  </View>
                                </TouchableHighlight>);
                              } else {
                                return(<TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                                  <View style={styles.columnRow}>
                                  </View>
                                </TouchableHighlight>);
                              }

                            }}
                            scrollEnabled={false}
                          />
                        </View>

                        <View style={[styles.columnView, {width:50}]}>
                          <View style={[styles.columnHeader, {width:50}]}>
                            <Text style={{ fontWeight: 'bold', textAlign: 'center' }}></Text>
                          </View>
                          <FlatList
                            data={state.tableProduct}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <View style={styles.columnRow}>
                              <Button
                                transparent onPress={() => {
                                  Alert.alert(
                                    I18n.t("ordAlertOrdDel"),
                                    I18n.t("complOrdBoardAlertDelConfirm").concat(item.product_name).concat(" ?"),
                                    [
                                      {text: I18n.t("noWord"), onPress: () => this.props.navigation.navigate('Ingredients')},
                                      {text: I18n.t("yesWord"), onPress: () => this.deleteProduct(item.product_id)},
                                    ]
                                  );
                                }}>
                                <Icon name="trash-can-outline" style={{color:'#2578cf', fontSize:23}}/>
                              </Button>
                            </View>}
                            scrollEnabled={false}
                          />
                        </View>

                       </ScrollView>
                    </View>
                    </View>
                </ScrollView>

有人有想法来实现这一点并解决我的问题吗？谢谢。

Answer 1

onEndReached 等许多属性不适用于嵌套的 ScrollViews。要制作你需要的东西，你需要使用父ScrollView的道具。

ScrollView 没有 onEndReached 属性，但您可以像这样手动实现它：

<ScrollView onScroll={e => {
       const {layoutMeasurement, contentOffset, contentSize} = e.nativeEvent;
       const paddingToBottom = 30;
       const isCloseToBottom = layoutMeasurement.height + contentOffset.y >=
                               contentSize.height - paddingToBottom;
       if(isCloseToBottom && !this.isLoading){ //!this.isLoading makes sure the items are loading only once per end reached.
           this.isLoading = true;
           //load more items into state here...
           this.setState({//change state}, () => (this.isLoading = false)); //make sure to set isLoading to false.
       }
}}>
{...your items here}
</ScrollView>

Answer 2

谢谢。效果很好，我就是这样用的：

<ScrollView refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
              />
            }  onScroll={e => {
                     const {layoutMeasurement, contentOffset, contentSize} = e.nativeEvent;
                     const paddingToBottom = 30;
                     const isCloseToBottom = layoutMeasurement.height + contentOffset.y >=
                                             contentSize.height - paddingToBottom;

                     if(isCloseToBottom && !this.isLoading){
                           this.isLoading = true;
                           this.setState({
                             limitItems: this.state.limitItems + 30
                           }, () => {
                             this.isLoading = false;
                           });
                    }
                  }}>

对于那些需要使用它的人，在 FlatList 上，我只是更新数据以设置它：

<FlatList
                            data={state.tableProduct.slice(0, this.state.limitItems)}
                            keyExtractor={item => item.product_id + ""}
                            renderItem={({ item }) =>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('EditProduct', {productId: item.product_id, productName: item.product_name})} underlayColor="white">
                              <View style={styles.columnRow}>
                                <Text style={{textAlign: 'left'}}>
                                  {`${(item.unite||'')} `}
                                </Text>
                              </View>
                            </TouchableHighlight>}
                            scrollEnabled={false}
                          />