web-dev-qa-db-fra.com

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

J'ajoute deux éléments sur la rangée

  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?

MODIFIER: 

J'ai aussi le problème de la santé 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 />,
    })
  }
reactjsreact-native
9
j.doe

Vous pouvez utiliser des accolades comme une expression avec des guillemets doubles et des guillemets simples pour les espaces i.e.,

{" "} or {' '}

Vous pouvez également utiliser des littéraux de modèle ES6, à savoir, 

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

Vous pouvez également utiliser & nbsp comme ci-dessous

<span>sample text &nbsp; <span>

Vous pouvez également utiliser & nbsp dans dangerouslySetInnerHTML lorsque vous imprimez du contenu HTML.

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

Option 1:

  • ajouter: justifyContent: 'space-between' à la View

Option 2:

  • ajoutez padding/margin à vos composants Icon ou Text
1
linasmnew