在同一行

我在該行增加了兩個元素兩個元素之間添加空間在同一行

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

來源

2017-10-18 j.doe

使用填充/保證金的時候使用& NBSP像下面

<span>sample text &nbsp; <span>

您還可以在dangerouslySetInnerHTML使用& NBSP？ – linasmnew

或者在這兩個元素之間渲染一個「{」「}」？ –

@linasmnew劑量在第二個示例中不起作用 –

選項1：

加：justifyContent: 'space-between'到View

選項2：

添加padding/margin要麼你Icon或您Text組件

來源

2017-10-18 12:22:24 linasmnew

它在第一個例子中適用於我，但不適用於第二個例子。 ChangeLanguage組件的位置不會改變。 –

你剛剛編輯的第二個例子似乎是一個自定義組件，你確定它需要風格作爲道具嗎？ – linasmnew

你可以使用大括號就像兩個雙引號和單引號的空間，即一個表達式，

{" "} or {' '}

你也可以使用ES6模板文字即

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

您還可以在打印HTML內容

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

來源

2018-01-20 03:25:05

回答

相關問題