リアクションネイティブ：ビュー幅を固定

Question

私のアプリに4：6の幅で2つのビューを入れて、それらの中にテキストを入れたいと思います。

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