将整个屏幕分为四个相等的部分

Question

我想将整个屏幕分为4等部分，每个屏幕都具有可单击的操作，并且在按下它时，请在按下文本框和确定按钮时出现提示，我需要渲染WebView <<

Answer 1

如果您在反应中进行此操作，则使用以下代码。这将分为四个部分将屏幕分开，使用TouchableOpacity您可以使用单击事件反射，否则您可以使用简单的View。

<View style={{ flex: 1 }}>
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'red' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'green' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>
  </View>
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'blue' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'yellow' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>
  </View>
</View>

是的，您可以使用常见的样式和组件，但是现在我使用单独的，因此您可以轻松编辑和测试。

Answer 2

您可以使用vw（视口宽度）和vh（视口高度），并分配给所有项目

width: "50vw",
height: "50vh"

Answer 3

<View style={{flex: 1}}>
     <View style={{flex: 1}}> </View>
     <View style={{flex: 1}}> </View>
</View>