React Native:修复视图宽度 [英] React Native: Fix view width

问题描述

我想在我的应用中放置两个宽度为 4:6 的视图，并在其中放置文本.

import React, { Component } from 'react';从'react-native'导入{ AppRegistry, View, Text};类 FixedDimensionsBasics 扩展组件 {使成为() {返回 (<视图样式={{flex:1, flexDirection: "row"}}><视图样式={{flex:0.4, backgroundColor: 'powderblue'}}><文本>sfasdfadsfdasfas</文本></查看><视图样式={{flex:0.6, backgroundColor: 'skyblue'}}><文本>sfasdfadsfdasfas</文本></查看></查看>);}}AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

我想要这样

但是当我在旁边添加文本时，它变成了这样

问题:有没有办法让视图保持固定宽度并使文本随宽度调整?

谢谢！

附言我使用

这里是 CSS 中 flex-base 的描述 CSS 技巧弹性基础

I want to put two view with 4:6 width in my app, and put text inside them.

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);

I want it like this

but when I add text in side, it becomes like this

Question: Is there a way to keep the view with fixed width and make text adjust with the width?

Thanks!

p.s. I use the React Native Doc for code example & debug.

解决方案

So I found an answer. Using 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);

Then the view fixed with 0.4 width.

Here is the description for flex-base in CSS CSS trick flex-base

这篇关于React Native:修复视图宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！