按钮在应用边框半径时没有四舍五入："50%" 在 ios 中

Question

在android中，相同的代码正确地完成了按钮。然而，在ios中，按钮不会显示为圆形。百分比值是否与react中的ios平台不兼容？

import { TouchableOpacity, Text } from 'react-native';
export default class App extends React.Component {
render() {
return (
<TouchableOpacity
style={{
width: 200,
height: 200,
borderRadius: '50%',
backgroundColor: 'red',
}}>
<Text> Click Me</Text>
</TouchableOpacity>
);
}
}

Answer 1

您应该像下面的一样操作

<TouchableOpacity
style={{
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: 'red',
}}>

Answer 2

你能试着用绝对值而不是相对值吗？我的意思是这样的，

const styles = StyleSheet.create({
button: {
borderRadius: deviceHeight * 50 / 100;
}
})

您可以使用react-native、的"Dimensions API获取设备高度

import {Dimensions} from 'react-native';
const {height: deviceHeight} = Dimensions.get('window');

Answer 3

根据文档，您应该在borderRadius中使用与设备无关的像素值，它需要一个数字。

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

borderRadius: 100

此外，您应该考虑使用Pressable而不是TouchableOpacity，这是一种更灵活、更强大、更经得起未来考验的

https://reactnative.dev/docs/pressable