Question

我正在尝试将按钮对齐到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,
  },

Answer 1

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

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

Answer 2

在这里，您只需将其从ScrollView中取出并确保它位于底部，如果您的父亲是亲属android:layout_alignParentBottom="true" 到你的SignUpbutton，如果它是一个LinearLayout，确保这是xml中的最后一个View，并且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或您使用的任何其他布局......

Answer 3

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

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

在ScrollView中将按钮对齐到底部

3 个答案: