作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在根据我们设计师的设计构建一个 React Native 应用程序。该设计有几个地方有按钮或带有一条对角线的形状(请参见以下示例)。我试过使用 SkewX
但这似乎只是旋转了整个形状(而且似乎在 Android 上不起作用)。如何在一侧绘制带有对角线边框的矩形/按钮?
最佳答案
您可以将 css 应用于 View
类并创建所需的输出,这是一个小的演示代码编辑版本
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.triangleCorner}></View>
<View style={styles.triangleCornerLayer}></View>
<View style={styles.triangleCorner1}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},triangleCorner: {
position: 'absolute',
top:105,
left:0,
width: 300,
height: 100,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 50,
borderTopWidth: 80,
borderRightColor: 'transparent',
borderTopColor: 'gray'
},triangleCorner1: {
position: 'absolute',
top:100,
left:0,
width: 130,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 50,
borderTopWidth: 90,
borderRightColor: 'transparent',
borderTopColor: 'green'
},triangleCornerLayer: {
position: 'absolute',
top:107,
left:0,
width:297,
height: 100,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 47,
borderTopWidth: 75,
borderRightColor: 'transparent',
borderTopColor: 'white'
}
});
结果:
关于android - 如何在 React Native 中创建对角线边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44787541/
我是一名优秀的程序员,十分优秀!