Question

我想将整个屏幕分为4个相等的部分，每个部分都有一个可单击的动作，并且onclick上会出现一个提示，其中包含一个文本框和一个按下该按钮的确定按钮，我需要呈现一个Web视图

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>

是的，您可以使用通用的样式和组件，但是现在我使用单独的So，您可以轻松地进行编辑和测试。

Answer 3

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

</View>

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

3 个答案: