React Native中的边框半径不起作用。

Question

我用React Native Expo制作了一个应用程序。因此，我对其中一个<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

- Aditya Sonawane

---

我在4部不同的安卓手机上安装了该应用程序的APK文件。但是其中1部手机没有显示圆角边框，而其他3部手机都显示了。 - Aditya Sonawane

请编写手机模型。 - Vasyl Nahuliak

它在红米Note 8 Pro上无法工作。 - Aditya Sonawane

我编辑了上面的问题。 - Aditya Sonawane

是的，现在它已经可以正常工作了，只需删除阴影/高度并应用边框=黑色，边框宽度=3。 - Aditya Sonawane

Answer 1

根据文档，您可能需要应用 overflow: 'hidden'。 https://reactnative.dev/docs/view-style-props

- Maximiliano Chiale

---

我已经做了那个改变，但在一些设备上仍然无法正常工作。 - Aditya Sonawane

Answer 2

我是React Native的错误

在Android 9中，高度和边框半径与不透明度无法很好地配合使用

- Vasyl Nahuliak

Answer 3

我在React Native的Android设备上遇到了这个问题，应用overflow: 'hidden'以及background: 'transparent'可以解决这个问题。不知道为什么需要背景颜色，但它确实有效！

- Bryan