在 ScrollView 中将按钮与底部对齐答案

【问题标题】：Align Button to Bottom in ScrollView在 ScrollView 中将按钮与底部对齐
【发布时间】：2017-11-23 05:07:19
【问题描述】：

我正在尝试将按钮与 ScrollView 底部对齐并使 ScrollView 填充页面。第一张截图是它的样子，第二张是我想要的。

在截图中，没有使用 ScrollView，因为没有足够的项目，但 ScrollView 内的项目数量不固定。

渲染（）：

<ScrollView style={styles.scrollViewContainer}>
      <View style={{flex: 1, justifyContent: 'space-between', flexDirection: 'column'}}>
        <View style={{flex: 1}}>
          <Text style={styles.bigTitle}>Title</Text>
          <View style={styles.formContainer}>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
          </View>
        </View>
        <SignupButton onPress={this.submit} title="Next Step" image={require("../Images/right_btn.png")} boldText={true} />
      </View>
    </ScrollView>

风格：

  scrollViewContainer: {
    backgroundColor: '#fff',
  },
  formContainer: {
    paddingTop: 10,
    paddingLeft: 50,
    paddingRight: 50,
    paddingBottom: 30,
  },
  bigTitle: {
    fontSize: 24,
    textAlign: 'center',
    marginTop: 20,
    marginBottom: 20,
  },

【问题讨论】：

为了清楚起见，如果表单足够大以滚动，您希望按钮始终固定，还是随内容滚动？
不，它不应该被修复。它应该在卷轴的末尾。
仅供参考：您可以使用 contentContainerStyle 删除内部包装 View。 See docs.
尝试在滚动视图中使用 contentContainerStyle={{ flex:1 }}
什么是样式块？那是CSS吗

标签： android ios react-native

【解决方案1】：

您可以查看我对类似问题的回答。链接在这里。

How to make component stick to bottom in ScrollView but still alow other content to push it down

【讨论】：

谢谢，使用flexGrow 解决了这个问题:)

【解决方案2】：

尝试将 justifyContent:'space-between' 和 flex:1 添加到 contentContainerStyle 到 ScrollView

  <ScrollView style={style.container} contentContainerStyle={[{flex:1,justifyContent:'space-between'}]} >
    <LIST />
    <Button />
  </ScrollView>

【讨论】：

【解决方案3】：

如果你的父级是Relativeandroid:layout_alignParentBottom="true"，你可以把它从ScrollView中取出并确保它在底部到您的 SignUpbutton，如果它是 LinearLayout，请确保这是 xml 中的最后一个视图，并且 LinearLayout 的高度正在填充屏幕，如果是 FrameLayout，那么我相信您需要将重力设置为底部 :)

<SomeLayout>
    <ScrollView style={styles.scrollViewContainer}>
      <View style={{flex: 1, justifyContent: 'space-between', flexDirection: 'column'}}>
        <View style={{flex: 1}}>
          <Text style={styles.bigTitle}>Title</Text>
          <View style={styles.formContainer}>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
          </View>
        </View>
      </View>
    </ScrollView>
        <SignupButton onPress={this.submit} title="Next Step" image={require("../Images/right_btn.png")} boldText={true} />
</SomeLayout>

SomeLayout 是RelativeLayout 或LinearLayout 或您使用的任何其他布局...

【讨论】：

感谢您的回答，但这次按钮始终显示在底部。我想要的按钮是在 ScrollView 的末尾。