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

您也可以使用＆amp; nbsp，如下所示

<span>sample text &nbsp; <span>

您还可以在打印html内容

时使用在dangerouslySetInnerHTML中使用＆amp; nbsp

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

Answer 2

选项1：

将View添加到padding

选项2：

将margin / Icon添加到您的Text或{ "MetadataInputs": { "redHat": { "hostName": "10.110.20.30", "userName": "admin", "password": "admin123", "organisationName": "networks", "repository":"Red Hat" } } }组件

Answer 3

我非常喜欢使用short syntax for fragments：

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

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

3 个答案: