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

Question

我想将整个屏幕划分为4个相等的部分，每个部分都有一个可点击的动作，并且点击一个提示应该出现一个文本框和一个好的按钮按下它我需要渲染一个webview

Answer 1

如果您在react-native中执行此操作，请使用下面的代码。这将分为四个部分的屏幕和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"