在React Native中使用flex的樣式寬度

我在反應本機中工作，我試圖設計一個組件的樣式。我有一個包裝兩個視圖（A和B）的視圖（黑色邊框）。我希望看起來像這樣的東西 - 包裝A的視圖的寬度大約爲75％，而包裝B的視圖的寬度大約爲25％。在React Native中使用flex的樣式寬度

當該組件被呈現出來的名單，但是，什麼我得到的是這樣的 - 當一個視圖的寬度取決於它有多少文字成立。

我能夠寬度設置爲特定的量，但它似乎總是更改基於我測試它在裝置（不同的iPhone上的5，6，6加等）上。因此，我試圖使用柔性樣式，但似乎無法正確使用它。這裏是我的造型和組件結構代碼：

const styles = StyleSheet.create({ 
    title: { 
    color: '#000', 
    textAlign: 'left', 
    fontSize: 80, 
    }, 
    row: { 
    flex: 1, 
    flexDirection: 'row', 
    padding: 0, 
    height: 180, 
    borderBottomColor: '#888', 
    borderBottomWidth: 1, 
    alignItems: 'stretch' 
    }, 
    innerContainer: { 
    flex: 1, 
    padding: 0, 
    flexDirection: 'row', 
    alignItems: 'stretch', 
    }, 
    sideDivider: { 
    flex: 0.8, 
    padding: 0, 
    backgroundColor: '#cacaca', 
    justifyContent: 'center' 
    }, 
    sideDividerArrow: { 
    flex: 0.2, 
    padding: 0, 
    alignItems: 'center', 
    backgroundColor: 'cyan', 
    justifyContent: 'center', 
    }, 
}); 

... 

render() { 
    return (
     <View style={styles.row} ref={component => this._root = component}> 
     <TouchableHighlight onPress={this.handleClick.bind(this)}> 
      <View style={styles.innerContainer}> 
      <View style={styles.sideDivider}> 
       <Text style={styles.title}> 
        {this.state.routeData.busNumber} 
       </Text> 
       <Text>{this.state.routeData.fullRoute}</Text> 
      </View> 
      <View style={styles.sideDividerArrow}> 
       <Text>></Text> 
      </View> 
      </View> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
}

任何和所有的幫助表示讚賞。謝謝！！

來源

2015-09-22 hidace

你的圖片有3個組件，但代碼實際上有更多。代碼應該按照預期工作，如果你這樣做：
- 行：flex：1（以確保行是全寬度）+ flexDirection：'row'（所以行的孩子將從左到右）。
- 容器：flex：3.
- B container：flex：1.
A或B的至少一個孩子應該有一個flex：1（或任何其他數字）以確保孩子也能夠伸展填補父母。

在你的情況下，給標題和文本組件一個flex：1屬性可能會伎倆。
希望這有助於！

來源

2015-09-23 17:19:57 wintvelt

flex屬性需要一個整數。我們不能使用分數。

我猜渲染以下內容將幫助您達到所需的外觀。然後，您可以添加交互並清理內聯樣式

<View style ={{flexDirection:'row',flex:1,borderColor:'black',borderWidth:1}}> 
    <View style ={{flex:3,backgroundColor:'blue',alignItems:'center',justifyContent:'center'}}> 
    <Text>A</Text> 
    </View> 
    <View style ={{flex:1,backgroundColor:'yellow',alignItems:'center',justifyContent:'center'}}> 
    <Text>B</Text> 
    </View> 
</View>

來源

2015-09-24 11:13:37

在React Native中使用flex的樣式寬度

回答

相關問題