☰

react-nativeでオーバーラップする方法 質問する

tag-icon • tag-icon react-native
react-nativeでオーバーラップする方法 質問する

こんにちは、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>

おすすめ記事