Question

平面列表没有在绝对视图中滚动，这是我的代码，但是如果我删除绝对列表，它将正常工作

<View style={{ flex: 1, marginTop: 8 }}>
        <Input ref={input => {
          this.input = input;
        }}
          onFocus={() => {
            this.setState({ showPicker: true })
          }}
          onEndEditing={() => {
            this.setState({ showPicker: false })
          }}>
        </Input>
        <View style={{ position: "relative", zIndex: 9999, margin: 8 }}>
          {
            this.state.showPicker ?
              <View style={{position:"absolute",width:"100%", backgroundColor: "white" }}>

                  <FlatList

                    data={["A", "B", "C", "D", "E", "F", "G", "H", "A", "B", "C", "D", "E", "F", "G", "H"]}
                    showsVerticalScrollIndicator={false}
                    renderItem={({ item }) =>
                    <TouchableWithoutFeedback>
                      <View>
                        <View style={{ width: "100%", height: 50 }}>
                          <Text style={{ height: "100%", width: "100%" }}>{item}</Text>
                        </View>
                        <Divider />
                      </View>
                      </TouchableWithoutFeedback>
                    }
                    keyExtractor={item => item}
                  />

                </View> : null
            }
          </View>        
      </View>

Answer 1

我遇到了同样的问题，并通过在绝对视图和具有高度的FlatList之间添加一个View来解决。
将contentContainerStyle设置为FlatList无效。

例如。

<View style={{position: 'absolute', top: 0, bottom: 0, etc..}}>
  <View style={{height: 300}}>
    <FlatList
      {...props}
    />
  </View>
</View>

Answer 2

完全有效-只需将height的父元素的Flatlist设置为100%，如下所示，然后根据需要将contentContainerStyle={{ paddingBottom: 30 }}设置为Flatlist-

<View style={height: '100%'}}>
    <FlatList
        data={DATA}
        contentContainerStyle={{ paddingBottom: 30 }}
        renderItem={renderItem}
        keyExtractor={item => item.id}
    />
</View>

快乐编码：）

Flatlist无法在绝对视图中滚动？

2 个答案: