如何在本机反应中在另一个视图（只有边框）之上设置视图

Question

我对 CSS 样式不太熟悉，想实现这个屏幕。 我做了一个分割（对角线）的视图，但实际上我是通过使用 CSS 中著名的边框技巧来实现的，

const App = () => {
   const Height=Dimensions.get("window").height
   const Width=Dimensions.get("window").width

   return <View
   style={{
      flex:1,
      borderTopWidth:Height/2,
      borderBottomWidth:Height/2,
      borderRightWidth:Width/2,
      borderLeftWidth:Width/2,
      borderTopColor:"gray",
      borderBottomColor:"red",
      borderRightColor:"red",
      borderLeftColor:"gray",
   }}>
 
   </View>; 
}

结果视图如下所示：

你可以观察到，这个视图（视图A）中只使用了边框来构造三角形视图，这个视图的行为就像背景一样，我想将另一个视图 (View B) 放在具有背景透明的 View A 之上，这样我就可以通过留在 View B。

我尝试将 View B 的位置设置为绝对位置，但无法正常工作， 请告诉我此问题的综合解决方案...

Answer 1

这里是一个示例。首先你需要有一个container 和一个position: relative。然后你可以用absolute 和z-index 定位内部div。

.container {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
    }
    .viewA {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        z-index: 2;
        background: yellow;
        opacity: 0.5;
    }
    .viewB{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: green;
        z-index: 1;
    }

<div class="container">
        <div class="viewA">View B</div>
        <div class="viewB">View A</div>
    </div>

Answer 2

有一个名为zIndex 的样式属性，它告诉组件根据您赋予它的值显示在前面或后面。 zIndex 默认为0，但您可以为其中一个指定大于 0 的数字，并且具有较高值的​​组件将显示在其他组件的前面。

喜欢;

<View>
    <View style={{zIndex: 1}} />
    <View style={{zIndex: 0}} />
</View>

在此示例中，第一个组件将显示在另一个组件的前面。确保它们具有相同的父级。

Answer 3

详细解答适用于同样陷入此类问题的人。 终于现在我能够以我想要的方式设计屏幕了， 根据我的问题，我越来越难以发表看法 另一个视图的顶部，由于一个原因，这就是我的根视图（视图 A），完全是使用边框构建的。

问题：为什么我只使用边框？

回答：其实我想用这种方式（对角相交）设计我的屏幕背景，这对我来说很容易以三角形方式构建， 这也是如何创建三角形的详细讨论，虽然有很多方法，但我选择了对我来说容易的一种。 三角形的形成我不想详细讨论，我已经在stackoverflow上回答过了，有兴趣的可以看看：

• My Answer
• Other Answers

现在我假设没有人会在这件事上遇到问题，为什么我只使用边框。

回到实际问题，我在主视图/根视图（视图 A）中只有边框，这意味着视图内部没有空间来容纳其他视图作为子视图。 我尝试了我的东西，但没有工作...... 人们在谈论一些花哨的词，例如 zIndex、相对位置、绝对位置。

• zIndex： 让开发人员可以控制组件相互显示的顺序。
• 相对位置：每个React Native中每个组件的默认位置，这意味着我们的组件将遵循正常的顺序（组件写入的顺序）
• 绝对位置：您可以将任何组件的位置显式更改为绝对，该组件现在不会按照移动到顶部位置的顺序在父组件内部（或在开发人员使用Flex Direction 提到的任何方向顶部）

由于我在 View A 中没有空间，因此在没有空间（只是边框）的视图中放置一些东西甚至看起来都不是很好。 所以我在 View A 和 View B 之上创建了一个新的父级，我的问题得到了解决，因为 View A 和 View B 位于同一层，所以我们不关心 View A 里面是否有空间，我们可以简单地将两个 View 重叠...

在展示具体代码之前，我先举几个例子，根据下面的代码，所有的视图都会一个接一个地布局，并且都有默认位置（相对）

const App = () => {

const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width

return <View style={{height:Height,width:Width}}>
  <View style={{height:300,width:300,backgroundColor:'purple',}}></View>    
  <View style={{height:200,width:200,backgroundColor:'blue',}}></View>    
  <View style={{height:100,width:100,backgroundColor:'gray',}}></View>
</View>
}

但是当我将所有视图的位置更改为 absolute 时，它们都会移动到它们的 primaryAxis 的顶部（primaryAxis 由 flexDirection 定义，它可以是行或列，默认情况下是react-native 中的列）...

const App = () => {

const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width

return <View style={{height:Height,width:Width}}>
  <View style= 
   {{height:300,width:300,backgroundColor:'purple',position:'absolute'}}></View>    
  <View style= 
   {{height:200,width:200,backgroundColor:'blue',position:'absolute'}}></View>    
  <View style= 
   {{height:100,width:100,backgroundColor:'gray',position:'absolute'}}></View>
</View>
}

我这样修复我的代码。

const App = () => {


const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width

return <View style={{height:Height,width:Width}}>
<View style={{
  flex:1,
  borderTopWidth:Height/2,
  borderBottomWidth:Height/2,
  borderRightWidth:Width/2,
  borderLeftWidth:Width/2,
  borderTopColor:"gray",
  borderBottomColor:"red",
  borderRightColor:"red",
  borderLeftColor:"gray",
}}></View>

<View style={{
  position:'absolute',
  height:Height,
  width:Width,
  backgroundColor:'transparent',
  justifyContent:'center',
  alignItems:'center'
 }}>
  
  <View style= 
    {{height:100,width:100,backgroundColor:'purple',borderRadius:20,margin:10}}> 
  </View>
  <View style= 
    {{height:100,width:100,backgroundColor:'cyan',borderRadius:20,margin:10}}> 
  </View>
  <View style= 
    {{height:100,width:100,backgroundColor:'pink',borderRadius:20,margin:10}}> 
  </View>

 </View>
</View>;
}