react-native - 如何在 react-native 中实现三角形的内角半径
解决方案
嘿,您可以使用 2 种方法来实现
- 堆叠视图
- 使用 svg
工作示例:https ://snack.expo.io/@ashwith00/honest-peach
代码:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Svg, Path } from 'react-native-svg';
const RADVALUE = 40;
const SIZE = 200;
export default function App() {
return (
<View style={styles.container}>
<View style={styles.traingleCorner}>
<View style={styles.coloredPart} />
<View style={styles.uncoloredPart} />
</View>
<View style={styles.traingleCorner}>
<Svg
width={`${SIZE}`}
height={`${SIZE}`}
fill="red"
strokeWidth={1}
viewBox={`0 0 ${SIZE} ${SIZE}`}>
<Path
d={`M0 0L0 ${SIZE}L${SIZE} ${SIZE}Q${RADVALUE} ${
SIZE - RADVALUE
} 0 0 `}
/>
</Svg>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
traingleCorner: {
width: SIZE,
height: SIZE,
},
coloredPart: {
flex: 1,
backgroundColor: 'red',
},
uncoloredPart: {
...StyleSheet.absoluteFillObject,
borderBottomLeftRadius: SIZE,
backgroundColor: '#ecf0f1',
},
});
在 svg 中,只需根据您的要求更改 SIZE、RADVALUE
推荐阅读
- amazon-web-services - 如何使用 Amazon Web Services 阻止没有标头的请求
- c# - 带有按钮列的 WPF MVVM 网格
- javascript - 网站是否可以检测 iOS/Android 中的特定应用程序是否在抓取其网站?
- filter - 如何在 yii2 中动态显示 pageSize?
- java - 在 java WorkbookFactory 中编辑 excel
- google-chrome - 如何在 Ubuntu 上的 chrome v68 中临时禁用 XSS Auditor
- sql - 如何在sql数据库中使用索引?
- javascript - Jquery 目标特定元素 - 下拉菜单
- bigdata - 水库采样:从流中驱逐特定项目?
- java - 如何使用卡片布局中的按钮导航到上一张卡片?