React Native: текст и значок - PullRequest
Новая
       16

React Native: текст и значок

0 голосов
/ 13 января 2019

Я пытаюсь расположить значок и текст внутри строки и выровнять текст по левому краю, а значок по правому краю ...

Вот как это выглядит в данный момент: enter image description here

Однако я хочу, чтобы текст был выровнен по левому краю, а значок - по правому краю, а также на одной высоте ...

Пока мой код: 

<Text
  style={{
    fontSize: 16,
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 10,
    paddingRight: 10,
    color: "black"
  }}
>
  Kategorien:
  <Icon
    style={{
      alignItems: "center",
      justifyContent: "center",
      textAlign: "right"
    }}
    name="keyboard-arrow-down"
    type="MaterialIcons"
  />
</Text>

Я также пытался использовать собственные элементы реагирования и использовать правый и левый элементы, однако в этом случае значок и текст не являются встроенными ... 

<View>
  <Left>
    Text...
  </Left>
  <Right>
    Icon...
  </Right>
</View>

Ребята, у вас есть идеи?

1 Ответ

0 голосов
/ 13 января 2019

Вам нужно обернуть с компонентом Просмотр текста и значков. И вы можете установить только отступы по горизонтали и вертикали. 

       <View style={{
            paddingVertical: 15,
            paddingHorizontal: 10,
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center"
        }}>
            <Text style={{
                    fontSize: 16,
                    color: "black"
                }}>Kategorien:</Text>
            <Icon/>
        </View>
...