React Native - 子ビューをラップする親ビュー

Question

私はそこにテキストを持つビューを持っています。コンポーネントは次のようになります。このコンポーネントが使用されます場合は

MyComponent =() => { 
    return (
     <View style={styles.viewStyle}> 
      <Text style={styles.textStyle}>My Text</Text> 
     </View> 
    ); 
} 

const styles = { 
    viewStyle: { 
     backgroundColor: '#006699', 
     height: 40, 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    textStyle: { 
     color: '#000000', 
     fontSize: 16, 
    } 
} 

、私は私のビューは、それだけで私のテキストをラップするようなカスタムの幅を持っていると思います。

Answer 1

それはLayout with Flexboxのオリジナルデザインについてです...ここで

const styles = { 
    .... 
    textStyle: { 
     color: '#000000', 
     fontSize: 16, 
     float:left, 
     padding:5px 
    } 
} 

Answer 2

とは何の関係もコンポーネントに反応：ここでは視覚的な手がかりがないのです。あなたはそれがで動作させるのいずれか、それにflexDirection: 'row'を追加することができます

は、親ビュー（それが自動的に<Text />幅に関連伸ばすだろう）、

<View style={{flex: 1, flexDirection: 'row'}}> 
    <View style={styles.viewStyle}> 
    <Text style={styles.textStyle}>My Text</Text> 
    </View>     
</View> 

または直接に幅を与えます。オプション1の

<View style=[{styles.viewStyle}, {width: 50}]> 
    <Text style={styles.textStyle}>My Text</Text> 
</View>     

結果：