Scrollview обрезает нижнюю часть мозаичного списка

Question

У меня есть прокрутка в моем проекте React, которая должна отображать карту данных. эти плитки также открывают аккордеонный стиль для отображения дополнительной информации. Девять предметов должны быть отображены и видимы, однако при просмотре прокрутки отображается только 7, а последний обрезается / аккордеон и сам тайл.

Попытка: создать представление вокруг него с помощью flex: 1, используя FlexGrow вместо flex, добавив высоту: 100.

<ScrollView style={styles.contentContainer}>
        <View style={styles.accordianContainer}>
          <Accordion
            sections={this.props.gyms}
            activeSections={this.state.activeSections}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
            onChange={this._updateSections}
            underlayColor={"#ffffff"}
          />
        </View>
      </ScrollView>


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
    contentContainer: {
      flex: 1,
      borderColor: 'red',
      borderWidth: 1,
    },
      accordianContainer: {
        height: ( Layout.noStatusBarHeight)* .9,
        width: Layout.window.width,
        marginBottom: Layout.window.height / 4,
      }

Answer 1

У меня была похожая проблема, и я нашел решение, добавив дополнительный вид с определенной высотой внизу прокрутки, как:

<View style={{height: 54}} />

Надеюсь, это поможет вам .