React Native为一侧创建三角形布局

Question

我想在本机样式中实现以下设计

当前我具有以下样式

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

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

Answer 1

<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>

尝试上面的代码