如何将视图放置在ScrollView的底部？

Question

我想创建一个带有ScrollView的屏幕，其中包含一些输入字段，并在屏幕底部创建一个Button（实际上是普通View中的2个按钮）。这应该很容易，但是，即使ScrollView中没有足够的元素来填充整个屏幕，我也想将按钮放置在屏幕的最底部。我可以使用绝对定位，但ScrollView可以比屏幕更大（更高），在这种情况下，按钮应位于ScrollView的末尾。（因此它将出现在屏幕之外，这意味着用户应向下滑动以查看按钮）。

我已经做了很多尝试，但是Button总是紧随ScollView内部的其他元素之后。

在图片中，滚动视图具有蓝色边框，而包含按钮的普通视图具有黑色边框。

任何建议表示赞赏。

Answer 1

找到了最好的解决方案。

关键是contentContainerStyle属性（文档：https : //facebook.github.io/react-native/docs/scrollview#contentcontainerstyle）。“这些样式将应用于包含所有子视图的滚动视图内容容器。”

设定后1，justifyContent：flexGrow，flexDirection“之间的空间”：“列”在contentContainerStyle，一个可以设置justifyContent：“柔性开始”，用于与文本上部容器视图，justifyContent：“柔性端”为带按钮的下部容器视图。

        <ScrollView
          contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}
          style={{backgroundColor: 'white', paddingBottom: 20}}>
          <View style={{ flex: 1, justifyContent: 'flex-start' }}>
              <Text>Some text with different length in different cases, or some input fileds.</Text>
          </View>
          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
            <View>
              <TouchableOpacity
                style={[commonStyles.greenButton, styles.buttonPadding]} >
                <Text style={commonStyles.greenButtonTitle}>Next</Text>
              </TouchableOpacity>
            </View>
            <View>
              <TouchableOpacity
                style={styles.cancelButtonContainer} >
                <Text style={styles.cancelButton}>Cancel</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>

Answer 2

<ScrollView
      contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'flex-end',
      }}>
</ScrollView>