嗨,想在我的react-native 应用程序中创建这样的UI吗

enter image description here

但我越来越像这样了

enter image description here

这是我的密码

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

推荐答案

enter image description here

必须使用position:'absolute',并将circle元素作为元素列表的最后一个元素,这样它才会位于顶部(无需使用zIndex).

下面的代码按预期工作.(我用"视图"和不同的 colored颜色 替换了"项目".你可以把这些东西改回go )

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

React-native相关问答推荐

react 本机函数不通过usContext触发

Reaction-原生NavBottom设计背景

Reaction-Native-pdf文件不是PDF格式或已损坏

React Native 中的视图与 Flex 不占用相同的高度空间

react-native 根据状态隐藏显示按钮

在 TouchableOpacity 上创建 Raised凸起或Shadow阴影效果

react native foreach 循环

运行react应用程序时出错

缺少请求的请求令牌

如何在 React Native 中按住以 Select 文本

React Native vs Swift/Objective-C/Java Native

TypeError : props.navigation.getParam 不是函数. In(props.navigation.getParam('name')

如何将样式传递给 React-Native 中的容器组件

Port 8081 already in use, packager is either not running or not running correctly Command /bin/sh failed with exit code 2

当前文件夹中的 react-native init

设置 react-native 元素时使用特定的包名称

我将如何根据百分比为按钮的宽度设置动画,并且它的背景 colored颜色 也是如此?

React Native - 如何从推送通知中打开路由

react-native:webview 高度

降级 react-native 的适当机制