我如何做到這一點的佈局使用Flexbox的反應母語？

Question

我想達到什麼樣的，我認爲在大多數應用一種很常見的排佈置使用反應母語：

這是我嘗試，但剩餘部分的寬度從未擴大超過文字它裏面：

render() { 
    return (
     <View style={{ flexDirection: 'row', justifyContent: 'flex-end', paddingLeft: 16 }}> 
      <View style={{ width: 50, height: 50, backgroundColor: 'red' }}> 
       <Text>Logo</Text> 
      </View> 
      <View style={{ alignSelf: 'stretch', backgroundColor: 'green' }}> 
       <Text>Name</Text> 
      </View> 
      <View style={{ width: 20, height: 20, backgroundColor: 'blue' }}> 
       <Text>Icon</Text> 
      </View> 
     </View> 
    ); 
} 

這是結果：

Answer 1

你要設置的flex屬性的剩餘視圖擴大。

render() { 
    return (
     <View style={{ flexDirection: 'row', justifyContent: 'flex-end', paddingLeft: 16 }}> 
      <View style={{ width: 50, height: 50, backgroundColor: 'red' }}> 
       <Text>Logo</Text> 
      </View> 
      <View style={{ flex: 1, backgroundColor: 'green' }}> 
       <Text>Name</Text> 
      </View> 
      <View style={{ width: 20, height: 20, backgroundColor: 'blue' }}> 
       <Text>Icon</Text> 
      </View> 
     </View> 
    ); 
}