Как можем да проектираме Arrow карта в react-native

Разработвам едно примерно приложение, в това приложение трябва да се изисква карта със стрелка, тя се използва за показване на карти на предлагане. Опитах базирани на react-native форми, но не разбрах резултата.

Да предположим, че ако предложеният текст се увеличи автоматично, формата на дизайна на стрелката също се увеличи

Ето това е моят код:

<View style={styles.container}>
                <View style={{ flex: 0.1, backgroundColor: "blue" }} />
                <View
                    style={{
                        flex: 0.9,
                        backgroundColor: "green",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <View style={styles.baseTop} />
                    <View style={styles.baseBottom} />
                </View>
            </View>
baseTop: {
    borderBottomWidth: 35,
    borderBottomColor: "red",
    borderLeftWidth: 50,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    height: 0,
    width: 0,
    left: 0,
    top: -35,
    position: "absolute"
},
baseBottom: {
    backgroundColor: "red",
    height: 55,
    width: 100
}

Това ми трябва като този тип изображение тук, това е посоченото изображение:

въведете описание на изображението тук


react-native react-native-ios react-native-android css
person Lavaraju    schedule 11.06.2018    source източник
comment
Предлагам да добавите css тага към въпроса си.   -  person zszep    schedule 11.06.2018

Отговори (2)


arrow_upward
8
arrow_downward

Ето как внедрих почти същото като вашето изображение.

import React, { Component } from 'react';
import { Text, View,StyleSheet } from "react-native";

export default class App extends Component {
  render() {
       return (
           <View style={{flex:1}}>
             <View
                style={styles.wrapper}>
                <View style={styles.rectangle}><Text>6</Text> <Text>tens</Text> </View>
                <View style={styles.rectangle}><Text>6</Text> <Text>ones</Text> </View>>
                 <View style={styles.triangle}></View>

            </View>
           </View>
        );
  }
}

const styles = StyleSheet.create({
    wrapper: {
        flexDirection: "row",
        justifyContent: "flex-start",
        flex: 0.2,
        alignItems: "center",
        paddingLeft: 29,
        paddingTop: 0,
        marginTop: 0

    },
    rectangle: {
        width: 50,
        backgroundColor: "yellow",
        margin: 0,
        justifyContent: "center",
        alignItems: "center",
        height: 52,
        borderColor:"black"

    },
    triangle: {
        width: 0,
        height: 0,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderLeftWidth: 27,
        borderRightWidth: 27,
        borderBottomWidth: 43,
        borderLeftColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor:"yellow",
        transform: [
            { rotate: '90deg' }
        ],
        margin: 0,
        marginLeft: -6,
        borderWidth: 0,
        borderColor:"black"
    }
});

Експо връзка https://snack.expo.io/rycpKiAe7

person Aung Myat Hein    schedule 13.06.2018
comment
Здравейте, благодаря, но не получавам черна линия на границата. Имам нужда и от черна граница как? - person Vyas Reddy; 30.12.2018

arrow_upward
2
arrow_downward

Можете да направите гъвкав квадрат, да го завъртите с помощта на Transform и абсолютна позиционирайте го на правилното място.

Или можете да използвате react-native-svg и да създадете SVG, след това го позиционирайте съответно.

person ReyHaynes    schedule 12.06.2018