こんにちは、React-NativeアプリでこのようなUIを作成したいです
でも私はこうなってきている
これが私のコードです
<View style={{flex: 1,flexDirection:'row'}}>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
</View>
<View style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<Item style={{backgroundColor:AppColors.colorPrimaryDark,
borderRadius:10,height:100, width:100, borderRadius:100/2}}></Item>
</View>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
</View>
</View>
ベストアンサー1
position:'absolute' を使用し、circle 要素を要素リストの最後の要素として配置して、一番上に来るようにする必要があります (zIndex を使用する必要はありません)。また、コンテナー div には、子要素を中央に配置するためのスタイルが必要です。コンテナー div は好きな場所に配置できるため、問題は発生しません。
次のコードは期待どおりに動作します。(「Item」を「View」と異なる色に置き換えました。これらは元に戻すことができます)
<View style={{flex: 1,flexDirection:'row', backgroundColor:'green', justifyContent:'center', alignItems:'center'}}>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
</View>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
</View>
<View style={{justifyContent:'center',alignItems:'center',alignSelf:'center', position:'absolute'}}>
<View style={{backgroundColor:'blue',
borderRadius:10,height:100, width:100, borderRadius:100/2}}></View>
</View>
</View>