Здесь - самое близкое, что я смог получить
Сложная часть создавала тень на углу, особенно учитывая, что API React-Native для теней сильно различаются между iOS и Android.
Чтобы преодолеть это, я использовал линейный градиент, который по умолчанию не включен в React Native. Я использовал expo-linear-gradient
, но есть несколько других, которые вы можете использовать, если хотите.
export const Triangle = props => (
<View style={props.style}>
<LinearGradient
colors={['black', 'transparent']}
start={[0, 0]}
end={[0.5, 0.5]}
style={styles.triangleShadow}
/>
<View style={styles.triangle} />
</View>
);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.card}>
<Text style={styles.text}>Be Cool.</Text>
<Triangle style={styles.topLeftTriangle} />
<Triangle style={styles.bottomRightTriangle} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 32,
},
text: {
fontSize: 18,
padding: 32,
paddingVertical: 48,
fontWeight: 'bold',
borderWidth: 1,
backgroundColor: '#F66F6F',
color: 'white',
borderColor: 'gray',
},
card: {
borderWidth: 1,
padding: 8,
borderColor: 'gray',
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 80,
borderTopWidth: 80,
borderRightColor: 'transparent',
borderTopColor: '#ecf0f1',
},
triangleShadow: {
height: 90,
width: 90,
position: 'absolute',
top: 0,
left: 0,
},
topLeftTriangle: {
position: 'absolute',
top: -10,
left: -10,
},
bottomRightTriangle: {
position: 'absolute',
bottom: -10,
right: -10,
transform: [{ rotate: '180deg' }],
},
});