React原生/世博会app:如何制作对角线背景？

Question

我正在我们的应用程序中构建一个可用性日历，对于有签到和签出的日子(发生在下午12:00)，我希望显示日历日期，要么是绿色的，要么是正确的，如下所示：

​

​

使用CSS，目前，我们实现了这样的效果：

linear-gradient(to bottom right, #beffbe 50%, #ffbdc2 51%)

实现这一点的最佳方式是什么？

我使用的是expo，所以是不是涉及到了<LinearGradient>？

Answer 1

不知道这是否是最好的解决方案，但您可以通过添加一个带边框的<View />作为您的内容的兄弟项来实现此效果：

import { Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

render() {
(...)

  <View style={{
    borderRightWidth: width,
    borderRightColor: 'red',
    borderTopWidth: width,
    borderTopColor: 'green',
    position: 'absolute',
    opacity: 0.5
  }} />

[Your content goes here]

(...)
}

希望能有所帮助