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

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>; 
}

结果视图如下所示：

你可以观察到在这个视图中只使用边框 (View A) 来构建三角形视图，这个视图将表现得像背景，我想把另一个视图 (View B) 放在背景透明的 View A 之上，这样我就可以轻松设计我的屏幕停留在 View B.

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

Answer 1

有一种样式属性称为 zIndex，它告诉组件显示在前面或后面，具体取决于您给它的值。 zIndex 默认是 0 但你可以给其中之一一个比 0 更大的数字，具有更高值的组件将显示在其他组件的前面。

喜欢；

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

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

Answer 2

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

.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 3

详细解答给同样被困在这些问题中的人。现在我终于可以按照我想要的方式设计屏幕了，根据我的问题，我越来越难以对另一个视图的顶部，由于一个原因，这就是我的根视图 （视图 A），完全是使用边框构建的。

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

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

Other Answers

现在我假设没有人会质疑我为什么只使用边框。

回到实际问题，我在main/root视图（视图A）中只有边框，意味着视图内没有space可以容纳小时候的其他观点。我尝试了我的东西但没有工作...... 人们在谈论一些花哨的词，例如 zIndex、相对位置、绝对位置.

zIndex: 允许开发人员控制组件在彼此之上显示的顺序。
相对位置：它是每个react native中每个组件的默认位置，这意味着我们的组件将遵循正常的顺序（编写组件）
绝对位置： 您可以明确地将任何组件的位置更改为 absolute 并且组件现在不会按照它将移动到父组件内顶部位置的顺序（或移动到开发人员使用 Flex Direction 提到的任何方向的顶部）

因为在我的例子中 View A 里面没有 space，所以在没有 [= =102=]（只是边框）。所以我在 View A 和 View B 的基础上创建了一个新的 parent，我的问题就解决了，因为 View A 和 View B 位于同一层，所以我们不关心 View A 是否有 space不管它与否，我们可以简单地重叠两个视图...

在展示具体代码之前先举几个例子，根据下面的代码，所有的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>;
}

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

how to set view on top of another view (having just borders) in react native

css

css-position

flexbox

reactjs

react-native