react-native - 将整个屏幕分成四等份

Question

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

Answer 1

如果您在 react-native 中执行此操作，请使用以下代码。这会将屏幕分为四个部分，TouchableOpacity您可以使用点击事件反射，否则您可以使用 simple 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>