反应原生的边界半径不起作用答案

【问题标题】：border radius in react native not working反应原生的边界半径不起作用
【发布时间】：2022-03-26 00:23:00
【问题描述】：

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

【问题讨论】：

什么同款手机不显示边框半径？
我在 4 部不同的安卓手机上安装了应用程序的 apk。但是 1 部手机没有显示边界半径，其他 3 部正在显示
请写手机型号。
我编辑了上面的问题
是的，现在它通过移除阴影/高程并应用边框 = 黑色，边框宽度 = 3，

标签： javascript react-native

【解决方案1】：

这是 React Native 的错误

Elevation and border radius do not work well with opacity from Android 9

【讨论】：

【解决方案2】：

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

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

【讨论】：

我做了这个更改，但它仍然无法在某些设备上运行

【解决方案3】：

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

【讨论】：