Рисование текста вдоль фигуры в React Native - PullRequest
Новая
       17

Рисование текста вдоль фигуры в React Native

0 голосов
/ 30 ноября 2018

У меня есть страница информации о статусе, где мне нужно показать статус только пользовательскую фигуру.Окончательный результат должен быть таким:

Final Output Image

До сих пор мне удалось получить эту форму, используя <View /> in 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 (желательно с стилем представления)?

...