使用文本内容维护视图的弹性布局

Question

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

Answer 1

每个组件的

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>

Answer 2

使用相同的代码时，我没有看到差异。附加屏幕截图供您参考。每个块的宽度为188。