如何解决React native 0.63,如何在Android上的borderRadius中剪切元素?
我正在尝试在android设备上使用border-radius裁剪元素,就像在iPhone上一样。 你知道吗?
我在borderRadius
上设置了FlatList
。
在iOS上,FlatList
项被borderRadius
剪切,但是在Android上,它们超过了borderRadius
。
解决方法
包装json:
{
"name": "BorderRadius","version": "0.0.1","private": true,"scripts": {
"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},"dependencies": {
"react": "16.13.1","react-native": "0.63.2"
},"devDependencies": {
"@babel/core": "^7.8.4","@babel/runtime": "^7.8.4","@react-native-community/eslint-config": "^1.1.0","@types/jest": "^25.2.3","@types/react-native": "^0.63.2","@types/react-test-renderer": "^16.9.2","@typescript-eslint/eslint-plugin": "^2.27.0","@typescript-eslint/parser": "^2.27.0","babel-jest": "^25.1.0","eslint": "^6.5.1","jest": "^25.1.0","metro-react-native-babel-preset": "^0.59.0","react-test-renderer": "16.13.1","typescript": "^3.8.3"
},"jest": {
"preset": "react-native","moduleFileExtensions": [
"ts","tsx","js","jsx","json","node"
]
}
}
我的代码:
import React from 'react';
import {
SafeAreaView,StyleSheet,View,Text,StatusBar,FlatList,} from 'react-native';
const texts = [
'Lorem ipsum dolor sit amet','Lorem ipsum dolor sit amet',];
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView style={styles.background}>
<View style={styles.spacer} />
<FlatList
style={styles.list}
data={texts}
renderItem={(obj) => (
<View style={styles.card} key={obj.index}>
<Text>{obj.item}</Text>
</View>
)}
/>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
background: {
backgroundColor: 'blue',flex: 1,},spacer: {
height: 50,card: {
paddingHorizontal: 8,paddingVertical: 16,borderRadius: 4,backgroundColor: 'white',borderColor: 'black',borderWidth: 1,marginBottom: 8,list: {
paddingHorizontal: 25,borderTopLeftRadius: 75,borderTopRightRadius: 75,});
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。