我對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）中僅使用邊框來構建三角視圖，并且此視圖將表現得像背景一樣，我想將另一個視圖（視圖 B）放在具有背景透明的視圖 A之上，所以我可以通過留在View B 中輕松設計我的螢屏。
我嘗試將View B 的位置設定為絕對，但這不能正常作業，請告訴我這個問題的綜合解決方案......
uj5u.com熱心網友回復：
這是一個示例示例。首先你需要有一個container帶有position: relative. 然后你可以用 positionabsolute和 a來定位內部 div 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>uj5u.com熱心網友回復：
有一個 style 屬性被呼叫zIndex，它告訴組件根據你給它的值顯示在前面或后面。zIndex 默認為0但您可以為其中一個提供比 0 更大的數字，并且具有較高值的??組件將顯示在其他組件的前面。
喜歡;
<View>
<View style={{zIndex: 1}} />
<View style={{zIndex: 0}} />
</View>
在本例中，第一個組件將顯示在另一個組件的前面。確保他們有相同的父母。
uj5u.com熱心網友回復：
為那些也陷入此類問題的人提供詳細解答。最后，現在我能夠以我想要的方式設計螢屏，根據我的問題，由于某種原因，我很難將視圖放在另一個視圖之上，這就是我的根視圖（視圖 A )，完全使用邊框構建。
問題：為什么我只使用邊框？
答：其實我想用這種方式（對角相交）來設計我的螢屏背景，用三角形的方式我很容易構建，這也是一個詳細的討論如何創建三角形，雖然有很多方法，但是我選擇了一個對我來說很容易的。我不想在大約形成三角形詳細討論去，我已回答了有關堆疊溢位興趣的人可以看看：
- 我的答案
- 其他答案
現在我假設沒有人會在這件事上遇到問題，為什么我只使用邊框。
回到實際問題，我在主視圖/根視圖（視圖 A）中只有邊框，這意味著視圖內部沒有空間來容納其他視圖作為子視圖。我嘗試了我的東西，但沒有奏效……人們在談論一些花哨的詞，比如zIndex、relative position、absolute position。
- zIndex：讓開發人員控制組件相互顯示的順序。
- 相對位置：它是每個 react native 中每個組件的默認位置，這意味著我們的組件將遵循正常的順序（撰寫組件的順序）
- 絕對位置：您可以將任何組件的位置顯式更改為絕對位置，該組件現在不會按照它移動到父組件內頂部位置的順序（或開發人員使用Flex Direction提到的任何方向移動到頂部）
因為在我的情況下，視圖 A內沒有空間，所以在沒有空間（只有邊框）的視圖中放置一些東西看起來似乎不太好。所以我在View A和View B之上創建了一個新的父級，我的問題解決了，因為View A和View B位于同一級別，所以我們不關心View A內部是否有空間，我們可以簡單地重疊兩個視圖......
在展示具體代碼之前讓我舉一些例子，根據下面的代碼，所有的視圖都會一個接一個地布置，并且都有默認位置（相對）
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>;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399770.html