React Native中的CSS三角形 [英] CSS Triangles in React Native

问题描述

我正在研究一个使用三角形覆盖其他容器/ div的应用。之前用CSS解决过的问题：

I'm working on an app that uses triangles that overlay other containers/divs. Had that solved with CSS before:

.triangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: -15px;
  width: 0;
  border-width: 0px 0px 15px 15px;
  border-style: solid;
}

但这在React中不再起作用。最好的解决方案是什么？

but that doesn't work in React any more. What's the best solution to go here?

推荐答案

做到这一点的最佳方法是创建< ; Image> 组件并将其绝对定位，类似于纯CSS三角形的方式。如果三角形的颜色是纯色，而不是渐变色或其他图案，则可以使用 tintColor 样式属性设置其颜色。

The best way to do this is to create an <Image> component and absolutely position it, similar to how you would a pure CSS triangle. If the triangle has a flat color, as opposed to a gradient or other pattern, you can set its color using the tintColor style property.

示例：

<Image
  source={require('image!triangle')}
  style={{tintColor: '#008080'}}
/>

这篇关于React Native中的CSS三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！