如何将 View 定位在 ScrollView 的底部？答案

【问题标题】：How to position a View at the bottom of a ScrollView?如何将 View 定位在 ScrollView 的底部？
【发布时间】：2018-09-27 14:38:05
【问题描述】：

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

我尝试了很多东西，但按钮总是紧跟在 ScollView 中的其他元素之后。

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

欢迎提出任何建议。

【问题讨论】：

您能否发布代码以便我们更好地了解视图的呈现方式？
我现在有一个解决方法，但感谢您的关注。如果您有任何建议，请告诉我。

标签： react-native react-native-scrollview

【解决方案1】：

找到最佳解决方案。

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

在contentContainerStyle中设置flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column'后，可以设置justifyContent: 'flex-start'为带有文本的上部容器视图，以及带有按钮的下部容器视图 justifyContent: 'flex-end'。

<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>;

【讨论】：

效果很好，兼容KeyboardAvoidingView。

【解决方案2】：


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

【讨论】：

【解决方案3】：

我找到了解决方法。

主要思想是设置视图的高度与文本和输入字段完全匹配屏幕的高度减去包含按钮的视图。

挑战是计算这个高度。 Abhishek Kumar 的回答帮助了我 (https://stackoverflow.com/a/41398953/4109477) 请参阅下面的代码：

         import { View, ScrollView, Text, TouchableOpacity, Dimensions } from 'react-native';

         const screenHeight = Dimensions.get('window').height;

          class MyClass extends React.Component {

          constructor(props) {
            super(props);
            this.state = {buttonViewHeight: 0};
          }

          find_dimesions(layout){
            this.setState({buttonViewHeight: layout.height});
          }
          render() {
            return (
              <View style={{minHeight: screenHeight, flex: 1, alignItems: 'center'}}>
                <ScrollView style={{minHeight: screenHeight}}>
                 <View style={{minHeight: screenHeight}}>
                    <View style={{minHeight: screenHeight - this.state.buttonViewHeight, borderWidth: 2, borderColor: 'red', alignItems: 'center', flex: 1}]}>
                      <Text>Some text with different length in different cases, or some input fileds.</Text>
                    </View>
                    <View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={{paddingBottom: 50, flex: 1, borderWidth: 2, borderColor: 'green'}}>
                      <TouchableOpacity
                        style={[commonStyles.greenButton, styles.buttonPadding]} >
                        <Text style={commonStyles.greenButtonTitle}>Next</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={styles.cancelButtonContainer} >
                        <Text style={styles.cancelButton}>Cancel</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </ScrollView>
              </View>
          }
   }

在下图你可以看到结果

由于视图高度的变化，此解决方案将在视图多次渲染时产生类似动画的效果。当您打开屏幕时，按钮的视图“淡入”。

如果您找到更好的解决方案，请告诉我！

【讨论】：