16

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

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

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

任何建议表示赞赏。

在此处输入图像描述

4

3 回答 3

60

找到了最好的解决方案。

关键是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>;
于 2018-10-04T15:21:00.030 回答
4 

<ScrollView
      contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'flex-end',
      }}>
</ScrollView>
于 2020-09-22T05:22:36.323 回答
0

我找到了解决方法。

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

挑战是计算这个高度。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>
          }
   }

在下图中，您可以看到结果

这就是现在的样子

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

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

于 2018-09-28T09:31:22.967 回答