反应本机:渲染布局与形式在中心，和灵活的背景

Question

我试着做这样的布局：https://i.stack.imgur.com/NCg1K.png

这就是我所拥有的

<View style={styles.container}>
    <View style={styles.sky}></View>
    <View style={styles.horizon}></View>
    <View style={styles.ground}></View>
</View>

  container: {
    flex: 1,
  },

  sky: {
    flex:15
  },

  ground: {
    flex:7
  },

  horizon: {
    flex:1
  },

但是我不知道应该在中央屏幕上添加表单

Answer 1

你可以用绝对实现。

更新

类似于：

import {Dimensions} from "react-native";

class App extends Component {
  render() {
    return (
      <>
      <View style={styles.container}>
        <View style={styles.sky}></View>
        <View style={styles.horizon}></View>
        <View style={styles.ground}></View>
        <View style={styles.center}></View>
      </View>
      </>
    );
  }
}



container: {
    flex: 1
  },
  sky: {
    flex: 15,
    backgroundColor: "red"
  },

  ground: {
    flex: 7,
    backgroundColor: "blue"
  },

  horizon: {
    flex: 1,
    backgroundColor: "green"
  },
  center: {
    position: "absolute",
    width:200,
    height:200,
    left:(Dimensions.get('window').width / 2) - 100,
    top:(Dimensions.get('window').height / 2) - 100,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gray"
  }

代码在线测试