图像溢出视图 - React Native

Question

我有这样的观点：

<View style={styles.aboutView}>
        <View style={styles.logoContainer}>
          <Image source={{uri: this.state.community.logo}} style={styles.logo} />
        </View>
        <Text></Text>
</View>

这是StyleSheet：

const styles = StyleSheet.create({
aboutView:{
 padding:5,
 flex: 1,
 flexDirection: 'row',
 borderColor: 'rgb(238, 238, 238)',
 borderBottomWidth : 1,
 borderTopWidth : 1,
 height:80,
 overflow:'visible'
},
logo:{
 width:100,
 height:100,
 borderRadius :50,
 overflow:'visible'
},
logoContainer:{
 marginTop:-30,
 width:100,
 height:100,
 borderRadius :50,
 shadowColor: "#000000", 
 shadowOpacity: 0.8, 
 shadowRadius: 2, 
 shadowOffset: {
   height: 1,
   width: 0
 }, 
 elevation:8,
 overflow:'visible'
}
});

这是我得到的结果：

正如您所看到的，logoContainer在aboutView顶级寄宿处被裁剪。我试图让logoContainer溢出aboutView，因为我希望图像溢出aboutView，到目前为止我已经尝试了几种方法，但似乎没有任何效果，似乎溢出属性没有效果。

这就是我想要实现的目标：

正如您所看到的那样，圆圈图像溢出并且没有在视图顶部被裁剪

Answer 1

感谢您提供您的意图照片。那更清楚了。试试这个......

<View style={styles.aboutView} />
<View style={styles.logoContainer}>
  <Image source={{uri: this.state.community.logo}} style={styles.logo} />
</View>
<Text></Text>

react-native中没有z-index，但是其他视图后面的视图在堆栈中会更高，因此您可以策略性地订购代码以实现所需的效果。