React Native：修复视图宽度

Question

我想在我的应用中放置两个宽度为4：6的视图，并将文本放入其中。

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View style={{flex:1, flexDirection: "row"}}>
        <View style={{flex:0.4, backgroundColor: 'powderblue'}}>
          <Text>sfasdfadsfdasfas</Text>
        </View>
        <View style={{flex:0.6, backgroundColor: 'skyblue'}}>
            <Text>sfasdfadsfdasfas</Text>
        </View>
      </View>
    );
  }
}

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

我想要这样

但是当我在旁边添加文字时，它就像这样

问题：有没有办法保持视图的宽度固定，并使用宽度调整文本？

谢谢！

P.S。我使用React Native Doc代码示例＆amp;调试。

Answer 1

所以我找到了答案。使用flexBasis:0.4。

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View style={{flex:1, flexDirection: "row"}}>
        <View style={{flex:0.4, flexBasis:0.4, backgroundColor: 'powderblue'}}>
          <Text>sadfsfsdfasdfdsfasdsadfasdf</Text>
        </View>
        <View style={{flex:0.6, flexBasis:0.6, backgroundColor: 'skyblue'}}>
            <Text>fasddfsadfsaf</Text>
        </View>
      </View>
    );
  }
}

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

然后视图固定为0.4宽度。

以下是CSS CSS trick flex-base

中flex-base的说明