react-native - 如何解决滚动中包含多个平面列表的虚拟列表警告

Question

我一直在处理应用程序中的遗留 View - 解决 ScrollView 组件中的 FlatLists 问题导致显示的虚拟化列表错误。

我有 5 个受影响的页面 - 前 3 个在 View 中只有 1 个平面列表 - 因此很容易将周围代码拆分为平面列表页眉和页脚 Assets 。但是，我不确定在有 2 个或更多平面列表方面该怎么做 - 我如何处理这种情况下的布局 - 所以只有 1 个滚动条？

我可能遗漏了一些非常简单的东西，但请指点一下!

查看代码如下:

<View style={[PRStyles.IRContainer]} >
        <StatusBar barStyle="light-content" />
        <View style={PRStyles.header}>
          <FixedHeader backButton={true} navScreen='HomeViewContainer' />
        </View>
        
        <View style={PRStyles.IRBody}>
          <ScrollView
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh} />}>
            <KeyboardAvoidingView> 
            <TitleHeader sectionLocaleTxt='Duty Record' sectionTxt='' sectionDesc='End of shift duty Record.' sectionHyphen={false}  />
            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowTitle}>{this.props.auth.checkedInVenueName}</Text>
              <Text style={FormStyles.PrRowDate}>{this.getCurrentDate()}</Text>
            </View>
            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>General Manager / Licence Holder:</Text>
              <View style={FormStyles.PrTable}>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >{this.state.licenceHolder}</Text></View>
              </View>
            </View>

            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>Door Staff (<Text style={FormStyles.PrRowCount}>{this.state.doorStaffCount}</Text> total)</Text>
              <View style={FormStyles.PrTable}>
                <FlatList
                  scrollEnabled={true}
                  data={this.state.rotaRecords}
                  keyExtractor={(item, index) => index.toString()}
                  ListEmptyComponent={this._listStaffEmptyComponent}
                  renderItem={this._renderDoorStaffItem}
                />
              </View>

            </View>
            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>Numbers:</Text>
              <View style={FormStyles.PrTable}>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total In <Text style={ FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalIn}</Text></Text></View>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total Out<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalOut}</Text></Text></View>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Overall Difference<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalDifference}</Text></Text></View>
              </View>

            </View>

            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>Door Counts:</Text>
              <FlatList
                  scrollEnabled={true}
                  data={this.state.countRecords}
                  keyExtractor={(item, index) => index.toString()}
                  ListEmptyComponent={this._listDoorCountEmptyComponent}
                  ListHeaderComponent={this._listDoorCountHeaderComponent}
                  renderItem={this._renderDoorCountItem}
                />
          </View>

            <View style={[FormStyles.form, FormStyles.PrRow, {marginTop:15, paddingTop:0, borderBottomWidth:0} ]}>
              <Text style={ModalStyles.formTop}><Text style={[ModalStyles.required, ]}>*</Text>Required Field</Text>
              <Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>1. Customer Comments:</Text>

              <View style={FormStyles.textInputBlock}>
                <TextInput
                  placeholder="Enter Comments"
                  numberOfLines={4}
                  onChangeText={val => this.setState({ comments: val})}
                  value={this.state.comments}
                  multiline
                  style={{minHeight: 280, height: 'auto', textAlignVertical: 'top'}}
                />
              </View>

              <Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>2. Duty Manager Name<Text style={ModalStyles.required}>*</Text> :</Text>

              <View style={FormStyles.textInputBlock}>
                <TextInput
                  ref='signatureName'
                  placeholder="Please Print Name"
                  style={FormStyles.textInputText}
                  autoCorrect={false}
                  returnKeyType='done'
                  value={this.state.signatureName}
                  onChangeText={(text) => this.setState({signatureName:text})}
                />
              </View>
              <Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>3. Duty Manager Signature: <Text style={ModalStyles.required}>*</Text></Text>
                  <Text style={[FormStyles.formLabelSub, FormStyles.formLabelSubHigh, FormStyles.superHighLight ]}>Note: PRESS BLUE SAVE BUTTON after applying Signature</Text>
              <View style={[FormStyles.textInputBlock, this.isSignatureAdded() && FormStyles.signatureBlock ]}>
                {this.signatureBlock()}

              </View>
            </View>

            {submitButton}
           </KeyboardAvoidingView>
          </ScrollView>
        </View>
      </View>

Answer 1

这是使用 ScrollView 和平面列表时最常见的错误。

为了防止错误原因，我们必须在单个平面列表中管理我们的 View ，并以我们希望的有效方式将其他组件放在列表页眉组件和列表页脚组件中。

<FlatList
    data={this.state.countRecords}
    renderItem={(item) => {
        return (
            // Your flat list item goes here..
        )
    }}
    ListHeaderComponent={
        // Content above the list goes here..
    }
    ListFooterComponent={
        // Content below the list should goes here..
    }
/>

您仍然可以查看以下链接以获得更多理解。

FlatList Example with Custom Header and Custom Footer