Реагировать на нативный макет создания треугольника для одной стороны - PullRequest
Новая
       11

Реагировать на нативный макет создания треугольника для одной стороны

0 голосов
/ 04 июля 2019

Я хочу добиться следующего дизайна в естественном стиле

В настоящее время у меня есть следующий стиль 

  <Text style={styles.saveTxt}> You save 20% </Text>

  saveTxt: {
    backgroundColor: '#7fda69',
    color: blue,
    borderRadius: 10
  },

enter image description here

1 Ответ

1 голос
/ 04 июля 2019 
<View style={{ flexDirection:"row",width:300,height:100,backgroundColor:"blue"}}>
                        <View style={{
                        width: 0,
                        height: 0,
                        backgroundColor: 'transparent',
                        borderStyle: 'solid',
                        borderTopWidth: 0,
                        borderRightWidth: 50,
                        borderBottomWidth: 100,
                        borderLeftWidth: 50,
                        transform: [{ rotate: '90deg'}],
                        borderTopColor: 'transparent',
                        borderRightColor: 'transparent',
                        borderBottomColor: 'red',
                        borderLeftColor: 'transparent',
                        }}>
                        </View>
                        <Text style={{color: "white",fontSize:20,alignSelf:"center", marginLeft:25}}>You save 20%</Text>
</View>

Попробуйте код выше

...