Question

需要有一个布局，使我的文本在中心居中垂直对齐，并且按钮在右下角：

example

注意：文本应在整个视口内垂直对齐-从顶部到bttom-例如，按钮具有绝对位置并且不在流程中（为避免使用绝对位置，请避免使用https://imgur.com/a/YenI9oA < / p>

尝试将flexDirection: "column"和alignItems: "center"用作容器，并将marginTop: "auto"用作按钮，但这只会在底部按下按钮

一些实验的方向相反：https://snack.expo.io/Bybw8xsXS

    <View style={styles.container}>
      <Text style={styles.text}>
        Change code in the editor and watch it change on your phone! Save to get
        a shareable url.
      </Text>
      <View style={styles.buttonContainer}>
        <View style={styles.button} />
      </View>
    </View>

  container: {
    marginTop: 80,
    height: 250,
    borderColor: 'red',
    borderWidth: 1,
    // flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    alignContent: 'center',
    flexWrap: 'wrap',
  },
  text: {
    fontSize: 18,
    borderWidth: 1,
    borderColor: 'green',
  },
  buttonContainer: {
    width: '100%',
    borderWidth: 1,
    borderColor: 'purple',
    alignSelf: 'flex-end',
  },
  button: {
    borderRadius: 10,
    width: 50,
    height: 25,
    backgroundColor: 'pink',
    alignSelf: 'flex-end',
  }

将其留在这里：React-Native Flexbox - Position One Item at Vertical Center and other at Bottom

Answer 1

最好使用flex。实际上，Flexbox旨在在不同的屏幕尺寸上提供一致的布局。了解更多信息： https://facebook.github.io/react-native/docs/flexbox

只需使用即可将您的代码如下：

<View style={styles.mainContainer}>
    <View style={styles.container}>
    <Text style={styles.text}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
    </Text>
    <View style={styles.buttonContainer}>
        <View style={styles.button} />
    </View>
    </View>
</View>

在您的样式中使用：

 mainContainer: {
        flex: 1,
        borderColor: 'red',
        borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    container: {
        flex: 6,//you can increase it to increase the space
        //borderColor: 'red',
        //borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
      text: {
        fontSize: 18,
        borderWidth: 1,
        borderColor: 'green',
      },
      buttonContainer: {
        flex:1
        width: '100%',
        //borderWidth: 1,
        //borderColor: 'purple',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
      },
      button: {
        borderRadius: 10,
        width: 50,
        height: 25,
        backgroundColor: 'pink',
        alignSelf: 'flex-end',
      }

希望我能帮上忙。

Answer 2

这非常简单：只需将文本嵌套在另一个视图中，如下所示：

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textView}>
        <Text style={styles.text}>
          Change code in the editor and watch it change on your phone! Save to get
          a shareable url.
        </Text>
      </View>
      <View
        style={{
          width: '100%',
          borderWidth: 1,
          borderColor: 'purple',
          alignSelf: 'flex-end',
        }}>
        <View style={styles.button} />
      </View>
    </View>
  );
};

然后更新样式：

  container: {
    marginTop: 80,
    height: 250,
    borderColor: 'red',
    borderWidth: 1,
    flex: 1,
    flexWrap: 'wrap',
  },
  textView:{
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    borderColor: 'orange',
    borderWidth:1,
  },

Answer 3

如果要复制模型，则应使用flexbox并将文本组件和按钮组件包装在2个单独的容器中：

您的文本容器将具有flex 1，而按钮容器将没有flex。因此，文本组件将占用所有可用空间减去按钮组件所占用的空间。

更新

要使文本在主容器中垂直居中，我看到的唯一解决方案是使按钮容器为“绝对”

  <View style={styles.mainContainer}>
    <View style={styles.textContainer}>
      <Text style={styles.text}>
        Change code in the editor and watch it change on your phone! Save to
        get a shareable url.
      </Text>
    </View>
    <View style={styles.buttonContainer}>
      <View style={styles.button} />
    </View>
  </View>

  mainContainer: {
    marginTop: 200,
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderColor: "red",
    borderWidth: 1,
    height: 300
  },
  textContainer: {
    flex: 1,
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1,
    borderColor: "blue"
  },
  text: {
    fontSize: 18,
    borderWidth: 1,
    borderColor: "purple"
  },
  buttonContainer: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    justifyContent: "flex-end",
    alignItems: "flex-end",
    borderWidth: 1,
    borderColor: "green"
  },
  button: {
    borderRadius: 10,
    width: 50,
    height: 25,
    backgroundColor: "blue",
    alignItems: "flex-end"
  }

React Native-垂直居中的文本和底部的按钮

3 个答案: