維護包含文本內容的視圖柔性佈局

-1

我希望視圖成爲屏幕的三分之一（水平方向），因此我創建了其中的三個視圖並分別設置了flex: 1。維護包含文本內容的視圖柔性佈局

現在，如果我把一個<Text>裏面，它會比其他2

如何維護它是屏幕的三分之一稍微大一點？

下面是一些代碼：

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native'; 

class FlexDirectionBasics extends Component { 
    render() { 
    return (
     <View style={{flex: 1, flexDirection: 'row'}}> 
     <View style={{flex: 1, backgroundColor: 'powderblue'}}> 
      <Text style={{backgroundColor: 'red'}}>text</Text> 
     </View> 
     <View style={{flex: 1, backgroundColor: 'skyblue'}} /> 
     <View style={{flex: 1, backgroundColor: 'steelblue'}} /> 
     </View> 
    ); 
    } 
}; 

AppRegistry.registerComponent('AwesomeProject',() => FlexDirectionBasics);

IMAGE：

來源

2016-11-18 Rodrigo Ruiz

flex:1針對每個分量意味着需要整個空間。試試這個：

<View style={{flex: 1, flexDirection: 'row'}}> 
    <View style={{flex: 0.33, backgroundColor: 'powderblue'}}> 
     <Text style={{backgroundColor: 'red'}}>text</Text> 
    </View> 
    <View style={{flex: 0.33, backgroundColor: 'skyblue'}} /> 
    <View style={{flex: 0.33, backgroundColor: 'steelblue'}} /> 
    </View>

來源

2016-11-18 05:45:03 abeikverdi

這是不正確的，當您爲每個組件設置'flex：1'時，它們按比例分配。嘗試在第一個示例https://facebook.github.io/react-native/docs/flexbox.html上將'width：50，height：50'更改爲'flex：1'。你嘗試過你的解決方案嗎？ –

但是，您的視圖中沒有顯示任何內容，所以我想flexbox會將其展開爲整個寬度。我沒有在水平視圖上試過這個。它適用於我的垂直父視圖。我檢查出來，並會讓你知道。 – abeikverdi

我在使用相同的代碼時看不到差異。附上的屏幕截圖供您參考。每個塊的寬度爲188.

來源

2016-11-18 08:55:58

不知道該告訴你什麼，我只是添加了我所看到的照片。我弄清楚瞭如何解決它，給所有組件添加相同的寬度（除了flex：1） –

維護包含文本內容的視圖柔性佈局

回答

相關問題