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

发布时间：2020-12-15 05:05:47 所属栏目：百科来源：网络整理

导读：我在行上添加了两个元素 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 )

我在行上添加了两个元素

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

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

{" "} or {' '}

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

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

您也可以使用下面的& nbsp

<span>sample text &nbsp; <span>

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!