如何将视图定位在 ScrollView 的底部？

Question

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

我已经尝试了很多方法，但 Button 总是紧跟在 ScollView 中的其他元素之后。

图片中的scrollview是蓝色边框，包含按钮的normal view是黑色边框。

如有任何建议，我们将不胜感激。

Answer 1

我找到了解决方法。

主要思想是设置带有文本和输入字段的视图的高度以精确匹配屏幕高度减去包含的视图的高度按钮.

挑战是计算这个高度。 Abhishek Kumar 的回答对我有帮助 () 请参阅下面的代码：

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

下图可以看到结果

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

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

Answer 2

找到最佳解决方案。

关键是 contentContainerStyle 属性（文档：https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle）。 "These styles will be applied to the scroll view content container which wraps all of the child views. "

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

Answer 3


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

如何将视图定位在 ScrollView 的底部？

How to position a View at the bottom of a ScrollView?

react-native

react-native-scrollview