在React Native中沿形状绘制文本

Question

我有一个状态信息页面，我需要在其中显示自定义形状的状态。最终输出需要是这样的：

到目前为止，我已经在以下样式的帮助下使用<View />中的React Native获得了该形状：

statusContainer: {
    borderRightWidth: Layout.window.width / 1.5,
    borderTopWidth: Layout.window.height,
    borderRightColor: "transparent",
    borderTopColor: Colors.corporateColor,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 5
}

关于状态，这是我在JSX中的代码：

<View style={styles.orderStatusStep1Container}>
    <Icon />
    <View>
        <Text style={styles.orderStatusDarkHeadline}>
            Awaiting Confirmation
        </Text>
        <Text style={styles.orderDetailFootText}>
            Our team is reviewing your order and you will receive a
            confirmation within 24 hours.
        </Text>
    </View>
</View>

上述代码的相关样式是：

orderStatusStep1Container: {
    height: 50,
    width: Layout.window.width - Layout.window.width / 2.2,
    marginLeft: Layout.window.width / 2.45,
    position: "absolute",
    top: 200,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start"
}

虽然上面的代码确实可以在iPhone上获得布局，但是它显然有缺陷，并且不能在各种屏幕尺寸上使用。

所以问题是我如何才能正确实现以上布局，以便使用React Native（最好使用视图样式）在不同的屏幕尺寸上工作？