React-nativeのカスタムコンポーネントの幅と高さを変更できませんか？

Question

私はこのような最小限のカスタムステートレスなコンポーネントを持っている：

const ViewBox = (props) => (
    <View style={ mainStyle : {backgroundColor: 'beige'} }> 
     {props.children} 
    </View> 
) 
export default ViewBox; 

ので、私は別のコンポーネント内にそれをインポートして使用します。

export default class Test extends React.Component { 

render() { 
    return (
     <View style={styles.containerView} > 
      <ViewBox style={styles.mainBox}> 
       <Text style={[styles.boxTitle, {color: '#8F468C'}]}>Lorem ipsum...</Text> 
      </ViewBox> 
     </View> 
    ); 
    } 
} 

const styles = {  
    containerView: { 
    flex: 1, 
    marginTop: 50, 
    alignItems: 'center', 
    backgroundColor: 'brown', 
    }, 
    mainBox: { 
    flex: 1, 
    width: 250, //No effect ! ! ! 
    height: 250 //No effect ! ! ! 
    }, 
    boxTitle: { 
    backgroundColor: 'pink', 
    fontSize: 17, 
    marginTop: 20 
    } 
}; 

ここでは、少なくとも2つの不可解な事実があります。
1）と、より重要なViewBoxを（またはあなたがここで使用したいすべてのカスタムコンポーネントの幅と高さ）は完全に制御の外にあります！数値サイズまたはFlex値を割り当てることは効果がなく、ViewBoxは内部テキストをレンダリングするのに必要な最小幅/高さを保持します。

2）WHY .... ViewBoxを、任意のサイズを無視し続け、今では、利用可能なすべてのスペースを埋める（そうViewBoxを、ルートになった）ルートビューを削除します？

すべての言及behavoirsは、予想通り、通常のビューですべての作品を、それを置き換える代わりにあれば、（この場合はViewBoxを）カスタムビューを使用して発生します。
React-nativeのフレックスとUIのベストプラクティスを十分に知っていると思いますが、そのような2つのケースはドキュメントで十分にカバーされていません。誰かが私を驚かせることを願っています！

Answer 1

これはフレキシボックスがどのように機能するかを実際にある：

1. のFlexコンテナは、彼らがその内容に縮小することを意味し、デフォルトでflexShrink: 1が付属しています。 flexShrink: 0を追加するとそれが変更されます。代わりにminWidthとminHeightを使用する必要があります。

2. それが伸びる理由は別に言い表せないからです。コンテナのデフォルト値はalignItems: 'stretch'で、内容は縮小されたalignItems: 'center'で上書きされます。

はスナックのコード例を見てください：心React Native's implementation is slightly differentでhttps://yoksel.github.io/flex-cheatsheet/

ベア：https://snack.expo.io/B1VdUma1M

での挙動を示して本当に素敵なフレキシボックスチートシート/遊び場があります。