React Native：修复视图宽度

Posted 2023-03-15

【中文标题】React Native：修复视图宽度

【英文标题】：React Native: Fix view width

【发布时间】：2017-03-22 15:29:19

【问题描述】：

我想在我的应用中放置两个宽度为 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);

我想要这样

但是当我在侧面添加文字时，它变成了这样

问题：有没有办法让视图保持固定宽度，让文字随宽度调整？

谢谢！

附言我使用React Native Doc 进行代码示例和调试。

【参考方案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 中 flex-base 的描述CSS trick flex-base