反应本机中的边框半径不起作用

Question

我在反应本机博览会上制作了一个应用程序。所以我将边框半径应用于其中之一<View>。所以我的问题是大多数手机在应用程序中显示边框半径，但有些手机<View>按原样显示矩形，它们没有向它们显示边框半径。为什么？

我的代码：

import { StyleSheet, Text, View, ScrollView, TouchableOpacity ,Image, Dimensions} from 'react-native';
import ButtonsCom from '../../components/buttonsCom';
import NavBar2 from '../../components/navBar2';


const animals3=function ({navigation}){

    
    return <View >   

                 <NavBar2 />

                <View style={style.styleView456}>
                        <TouchableOpacity style={{}} activeOpacity={0.8}  onPress={()=>{}}> 
                                    <View  style={style.styleView}>
                                        
                                        <View style={style.styleView888}>
                                            <View style={style.styleView8882}>
                                                <Image style={style.imageVio888} source={require('../../../assets/animals/elephant.png')}/>
                                                <Text style={{marginTop:100, marginHorizontal:10 , fontSize:20, fontWeight:"bold"}}>ELEPHANT</Text>
                                            </View>

                                    
                                        </View>
                                    </View>     
                        </TouchableOpacity>

                        

                        <View style={style.styleView}>
                            <ButtonsCom/>                        </View>
                </View>
    </View> 

}
let ScreenHeight = Dimensions.get("window").height-90;
const style=StyleSheet.create({
    styleView456:{
        height:ScreenHeight,
        justifyContent:"space-around"
    },
    styleView:{
        flexDirection:"row",
        justifyContent:"space-around",
        paddingTop:20
    },
    styleView888:{
        borderColor:"#F5F6FA",
        width:300,
        height:500,
        borderRadius:20,
        alignItems:"center",
        shadowColor:'black',
        shadowOffset:{ width: 0, height: 3 }, 
        shadowRadius:6,
        elevation:5
        
    },
    imageVio888:{
        
        width:270,
        height:200,
        marginTop:60
    },
    styleView8882:{
        alignItems:"center"
    }
 });
 
 
 export default animals3;

所以，我已将边框半径应用于style=style.styleView888

Answer 1

根据文档，您可能需要申请overflow: 'hidden'.

https://reactnative.dev/docs/view-style-props

Answer 2

这是 React Native 的 bug

从 Android 9 开始，高度和边框半径与不透明度的配合效果不佳