espace entre les deux éléments sur la même ligne

Question

J'ajoute deux éléments sur la ligne

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

comment puis-je ajouter un espace entre eux?

EDIT:

J'ai aussi le problème sain d'esprit ici:

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

Option 1:

• ajouter: justifyContent: 'space-between' au View

Option 2:

• ajouter padding/margin soit à vos Icon ou vos Text composants

Answer 2

Vous pouvez utiliser des accolades comme une expression à la fois des guillemets doubles et des guillemets simples pour l'espace c.-à-

{" "} or {' '} 

Vous peut également utiliser des littéraux de modèle ES6, c.-à-d.,

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

Vous pouvez également utiliser & nbsp comme ci-dessous

<span>sample text &nbsp; <span> 

Vous pouvez également utiliser & nbsp en dangerouslySetInnerHTML lors de l'impression du contenu html

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