如何在反应原生中重叠

发布时间：2020-12-15 20:41:54 所属栏目：百科来源：网络整理

导读：您想在我的react-native应用程序中创建这样的UI 但我会这样这是我的代码 View style={{flex: 1,flexDirection:'row'}} View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}} View style={{flex: 1,flexD

您想在我的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,alignItems:'flex-start',width:100}}></Item>
                </View>
            </View>
            <View style={{justifyContent:'center',alignSelf:'center'}}>
                <Item style={{backgroundColor:AppColors.colorPrimaryDark,width:100,borderRadius:100/2}}></Item>
            </View>
            <View style={{flexDirection:'column',alignSelf:'flex-start',width:100}}></Item>
                </View>
            </View>
        </View>

你必须使用position：’absolute’并将circle元素作为元素列表的最后一个元素,这样它就会到达顶部(不需要使用zIndex).
容器div也必须具有子元素居中的样式.因为您可以将容器div放在任何您想要的位置,所以不会有问题.

以下代码按预期工作. (我将“项目”替换为“查看”和不同颜色.您可以更改这些内容)

<View style={{flex: 1,backgroundColor:'green',alignItems:'center'}}>
                <View style={{flexDirection:'column',alignSelf:'center'}}>
                    <View style={{flex: 1,margin:10}}>
                        <View style={{backgroundColor:'white',width:100}}></View>
                    </View>
                    <View style={{flex: 1,width:100}}></View>
                    </View>
                </View>

                <View style={{flexDirection:'column',width:100}}></View>
                    </View>
                </View>

                <View style={{justifyContent:'center',alignSelf:'center',position:'absolute'}}>
                    <View style={{backgroundColor:'blue',borderRadius:100/2}}></View>
       </View>
</View>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!