维护包含文本内容的视图柔性布局

问题描述：

我希望视图成为屏幕的三分之一（水平方向），因此我创建了其中的三个视图并分别设置了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：

答

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>

这是不正确的，当您为每个组件设置'flex：1'时，它们按比例分配。尝试在第一个示例https://facebook.github.io/react-native/docs/flexbox.html上将'width：50，height：50'更改为'flex：1'。你尝试过你的解决方案吗？ –

但是，您的视图中没有显示任何内容，所以我想flexbox会将其展开为整个宽度。我没有在水平视图上试过这个。它适用于我的垂直父视图。我检查出来，并会让你知道。 – abeikverdi

答

我在使用相同的代码时看不到差异。附上的屏幕截图供您参考。每个块的宽度为188.

不知道该告诉你什么，我只是添加了我所看到的照片。我弄清楚了如何解决它，给所有组件添加相同的宽度（除了flex：1） –

维护包含文本内容的视图柔性布局

相关推荐