首页 > 解决方案 > ios底部的滚动视图截止

问题描述

我有以下代码片段。最后一个元素在 ios 设备中被截断的地方。有人可以帮我解决这个问题吗?

  <View >
    <Animated.View
      style={[
        {
          transform: [
            {
              translateX: this.state.x
            }
          ]
        },
        { flexBasis: "100%" }
      ]}
    >
      <ScrollView
        contentContainerStyle={{ flexGrow: 1}}
        importantForAccessibility="no"
        onScroll={(event) => {
          this.setYOffset(event.nativeEvent.contentOffset.y);
        }}
        onContentSizeChange={(contentWidth, contentHeight) => {
          this.maxHeight = contentHeight;
        }}
      >
        <KeyboardAwareScrollView>
          <View style={styles.containerViewStyle} importantForAccessibility="no">
                 <Row />
                 <Row />
                 <Row />
                 <Row />
                 <Row />
          </View>
        </KeyboardAwareScrollView>
      </ScrollView>
    </Animated.View>
  </View>

keyboardawarescrollview 中的视图样式如下:

const styles = {
  containerViewStyle: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "space-between"
  }
};  

我尝试将 flex:1 设置为最外面的视图。但这并不能解决问题。有人可以帮助我了解这里的问题吗?

标签: react-nativeflexboxuiscrollviewreact-native-ios

解决方案


尝试给予paddingBottominScrollviewcontentContainerStyle

<ScrollView
    contentContainerStyle={{ paddingBottom: 40 }}
>

    {/* Children */}
</ScrollView>

推荐阅读