親の幅をReact Nativeでコンテンツを囲む方法は？

Question

私はReact Nativeを初めて使うので、これは愚かな質問かもしれません。左に垂直に配向し、私は2人の子供、画像とテキストを持つ親ビューを持っている

、：私は取得しようとしています何

はこのようなものです。私が望むのは、子ビューの幅のみをカバーする親ビューです。しかし、代わりに私が取得することはこれです：

親ビューは、携帯電話の画面の完全な幅に広がっています。 Androidの 'ラップ・コンテンツ' 幅の値に類似し

render() (<View style={{backgroundColor: '#333333'}}> 
    <Image source={btnImageSource} /> 
    <Text>Some label</Text> 
</View>); 

何か：

は、ここに私のコードです。

Answer 1

flexを使用してこれを行うことができます。フレックスで作業する場合、このguideが非常に役立つことがわかりました。

良い出発点は、flexDirection: row, justifyContent: flex-start

render() (
    <View style={{justifyContent: 'flex-start', flexDirection: 'row'}}> 
     <View style={{backgroundColor: '#333333'}}> 
      <Image source={btnImageSource} /> 
      <Text>Some label</Text> 
     </View> 
    </View> 
); 

ある親ビューを作成することです