Значок места на той же строке, что и текст

Я пытаюсь разместить свой значок в той же строке, что и 2 Replies.Значок места на той же строке, что и текст

Вот скриншот того, как он выглядит:

enter image description here

Я хотел бы иметь его справа от линии, как показано стрелкой.

Вот как render функция моего компонента выглядит:

render: function() { 
    return (
     <TouchableHighlight onPress={this.props.onSelect}> 
     <View style={styles.container}> 
      <Image source={{uri: this.state.image}} 
       style={styles.image} /> 
      <View style={styles.postDetailsContainer}> 
      <Text style={styles.postTitle}> 
       {this.state.name} 
      </Text> 
      <Text style={styles.postDetailsLine}> 
       {this.state.comment} 
      </Text> 
      <View> 
      <Text style={styles.postChildrenDetails}> 
       {this.props.comment.child_comments_count} Replies 
      </Text> 
      <Icon 
       name='fontawesome|comments-o' 
       size={25} 
       color='#D6573D' 
       style={styles.icon} 
      /> 
      </View> 
      <View style={styles.separator} /> 
      </View> 
     </View> 
     </TouchableHighlight> 
    ) 
    }

Вот как мой StyleSheet выглядит:

container: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#FFFFFD', 
    }, 
    image: { 
    height: 48, 
    width: 48, 
    borderRadius: 25, 
    marginTop: 10, 
    alignSelf: 'center', 
    marginRight: 15, 
    marginLeft: 15 
    }, 
    postDetailsContainer:{ 
    flex: 1, 
    }, 
    postTitle: { 
    fontSize: 15, 
    textAlign: 'left', 
    marginTop: 10, 
    marginBottom: 4, 
    marginRight: 10, 
    color: '#D6573D' 
    }, 
    postDetailsLine: { 
    fontSize: 12, 
    marginRight: 10, 
    color: 'gray', 
    }, 
    postChildrenDetails: { 
    fontSize: 12, 
    marginTop: 5, 
    marginBottom: 10, 
    marginRight: 10, 
    color: 'gray', 
    textAlign: 'right', 
    flex: 1 
    }, 
    separator: { 
    height: 0.5, 
    backgroundColor: '#CCCCCC', 
    }, 
    icon: { 
    flex: 1, 
    textAlign: 'right', 
    width: 25, 
    height: 25 
    } 
})

источник

2015-06-28 Richard Kho

Вы можете [: after] (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter) в своем css. Какой бы класс/id в контейнере «2 ответа» вы не могли добавить элемент psuedo, как этот 'twoRepliesContainer: after {background-image: url ('chat-image.png');} – clovola

React Native StyleSheet не поддерживает CSS-псевдо -элементов. –

Просто оберните значок и текст ответов в другом представлении, а затем используйте flexbox для создания этого вида. –

Я имел такую же проблему и для тех, кто, имеющих тот же вопрос, вот как я пошел о его решении.

Wrap значок и текст в представлении, как @Colin Ramsey сказанное выше в комментариях

Это будет выглядеть следующим образом:

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <Icon name="ios-chat" size={20} /> <Text> 2 replies </Text> </View>

Шалом!

источник

2017-08-29 09:50:09

Значок места на той же строке, что и текст

ответ

Смежные вопросы