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

Question

我在行上添加了两个元素

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

Answer 1

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

{" "} or {' '}

您还可以使用ES6模板文字,即

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

您也可以使用下面的内容

<span>sample text &nbsp; <span>

您还可以在打印html内容时使用dangerouslySetInnerHTML

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

Answer 2

选项1：

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

选项 2：

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

Answer 3

我非常喜欢使用片段的短语法：

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