如何在没有直线的情况下划分 2 个视图？答案

【问题标题】：How to divide 2 views without a straight line?如何在没有直线的情况下划分 2 个视图？
【发布时间】：2017-07-12 16:52:39
【问题描述】：

假设我想创建一个如下图所示的视图。有什么解决方法吗？除了创建和使用照片作为背景图像之外的任何内容。 http://i68.tinypic.com/2w6z4o1.jpg

【问题讨论】：

您只是想创建一个这样的双色屏幕，还是每个色块都需要作为单独的视图？我认为 react-native-linear-gradient 可以将两种颜色应用于这样的视图，但它们不能用作单独的视图github.com/react-native-community/react-native-linear-gradient
不，实际上我希望它们都能正常工作。 @GarrettMcCullough
在原生环境（iOS 或 Android）中你会怎么做？
我只在前端开发中使用 react。 idk @vovkasm
我问了，因为方法使 RN 中的此类视图与本机应用程序中的视图相同。但是，afaik，在一般情况下，这是一项非常艰巨的任务。在某些特定情况下，它可以被简化，例如：3 个矩形视图：顶部用于顶视图，中间 - 对角线装饰，底部用于底视图。

【解决方案1】：

这里有两个单独的效果：

背景渐变 - 假设可以接受线性渐变，就使用它：react-native-linear-gradient
非水平线。您可以通过在View 上使用旋转变换并在内部视图上进行反向变换来实现此目的。您需要正确排序以使其位于其兄弟元素之上（最后一个元素高于前一个元素）。例如

<View style={{transform: [{rotate: rotation}]}}> <View style={{transform: [{rotate: -rotation}]}}> {children} </View> </View>

【讨论】：