将图标与文本放在同一行答案

【问题标题】：Place icon on same line as text将图标与文本放在同一行
【发布时间】：2021-03-27 17:44:27
【问题描述】：

我正在尝试将我的图标与2 Replies 放在同一行。

这是它的外观截图：

我想把它放在行的右边，如箭头所示。

这是我的组件的 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>
      )
  }

这是我的样式表的外观：

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

【问题讨论】：

你可以在你的CSS中:after。无论您的“2 个回复”容器具有什么类/ID，您都可以像这样添加伪元素 `twoRepliesContainer:after{background-image:url('chat-image.png');}
React Native StyleSheet 不支持 CSS 伪元素。
只需将图标和回复文本包装在另一个视图中，然后使用 flexbox 设置该视图的样式
你最终得到了什么？现在正在尝试做类似的事情。

标签： flexbox react-native

【解决方案1】：

我遇到了同样的挑战，对于遇到同样问题的任何人，我都是这样解决的。

将图标和文本包装在一个视图中，就像上面在 cmets 中所说的 @Colin Ramsey 一样

看起来像这样：

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

沙洛姆！

【讨论】：

【解决方案2】：

试试这个

    }}
  >
    <Text style={styles.title}>Leagues</Text>
    <MaterialIcons name="sports-baseball" size={26} color="#cd000f" />
  </View>

标题的css：

标题：{ 字体大小：18，保证金：20，颜色：“#cd000f”， },

【讨论】：

为什么 OP 应该尝试这个？

【解决方案3】：

在 props reactjs 中居中图片和文本同一行

    <div style={{ alignItems: "center", display: "flex", justifyContent: "center" }} >
    <img src={this.props.location.state.image} style={{ height: "100px", width: "100px", border: "4px solid white", verticalAlign: 'middle' }} />
 <span style={{ fontSize: '40px', fontWeight: 'bolder', textAlign: 'center', verticalAlign: 'middle' }}>
  {this.props.location.state.subject}</span>
   </div>

【讨论】：