React Native 中的 CSS 三 Angular 形不再起作用

Question

我正在开发一个应用程序，该应用程序使用覆盖其他容器/div 的三 Angular 形。之前用 CSS 解决过这个问题吗:

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

但这在 React 中不再起作用了。这里有什么解决方案吗？

Answer 1

仍然可以使用 CSS 技巧在 React Native 中绘制三 Angular 形。我写了一个类来封装它:https://github.com/Jpoliachik/react-native-triangle

如果你想自己写，我使用了这个工具:http://apps.eky.hk/css-triangle-generator/生成我想要的三 Angular 形并将样式修改为 React Native 语法。

例如，CSS 中指向上方的等腰三 Angular 形 90x90 的内容为:

width: 0;
height: 0;
border-style: solid;
border-width: 0 45px 90px 45px;
border-color: transparent transparent #007bff transparent;

但在 React Native 中，样式将是:

triangle: {
     width: 0,
     height: 0,
     backgroundColor: 'transparent',
     borderStyle: 'solid',
     borderTopWidth: 0,
     borderRightWidth: 45,
     borderBottomWidth: 90,
     borderLeftWidth: 45,
     borderTopColor: 'transparent',
     borderRightColor: 'transparent',
     borderBottomColor: 'red',
     borderLeftColor: 'transparent',
   },