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代碼示例&調試。

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