将整个屏幕分成四等份

Question

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

Answer 1

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

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

Answer 2

如果您在 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 3

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

</View>

将整个屏幕分成四等份

Divide the whole screen into four equal parts

prompt

webview

flexbox

react-native

touchableopacity