在同一行的两个元素之间添加空格答案

【问题标题】：Add space between two elements on the same line在同一行的两个元素之间添加空格
【发布时间】：2017-10-18 12:16:23
【问题描述】：

我在行上添加两个元素

  render() {
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <Icon
         name='person' 
         color='#98999c'
         onPress={this.handleClick.bind(this)} /> 
         <Text style={ styles.header }>
          { 'User Name' }
        </Text>
          
      </View>
          )
  }

如何在它们之间添加空格？

编辑：

我这里也有同样的问题：

const AppNavigator = StackNavigator({
  Home: {
    screen: AppDrawer,
    navigationOptions: ({navigation}) => ({
      headerLeft:
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Icon name="menu" size={35} margin={30} padding={30} onPress={ () => navigation.navigate('DrawerOpen') } />
      <ChangeLanguage style={{ margin: 30 , padding: 30}} />
      </View>,
      headerRight: 
      <HeaderUserInformation />,
    })
  }

【问题讨论】：

使用填充/边距？
或者在两个元素之间渲染一个{" "}？
@linasmnew 在第二个示例中不起作用
您在我回答原始问题 30 分钟后才添加了第二个示例……它似乎是一个自定义组件，您确定它将样式作为道具吗？
添加 {" "} 两个单词之间的空格

标签： reactjs react-native

【解决方案1】：

您可以使用大括号，例如带有双引号和单引号的表达式，即，

{" "} or {' '}

您也可以使用 ES6 模板文字，即，

`   <li></li>` or `  ${value}`

你也可以像下面这样使用 &nbsp

<span>sample text &nbsp; <span>

打印html内容时也可以在dangerlySetInnerHTML中使用&nbsp

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

【讨论】：

谢谢，模板文字对我有用，甚至直接像 {2020 • Documentary • Biography}

【解决方案2】：

选项 1：

添加：justifyContent: 'space-between' 到View

选项 2：

将padding / margin 添加到您的Icon 或Text 组件中

【讨论】：

第一个例子对我有用，但对第二个例子不起作用。 ChangeLanguage 组件的位置不会改变。
你刚刚编辑的第二个例子似乎是一个自定义组件，你确定它把样式作为道具吗？
行内元素之间需要空格来换行。例如a..ab..b 不会被包装，但是a..a b..b 将被正确包装。在普通的 HTML 中，我们通常将它们放在不同的行上，并在不考虑的情况下获得正确的行为。然而，React 将元素连接在一起而不添加空格，因此必须使用 {" "} 显式完成。

【解决方案3】：

我很喜欢使用short syntax for fragments：

<><strong>Foo</strong> </>

【讨论】：