React Native：ScrollViewのFlexが動作しない

Question

私は2つの子、もう1つのViewとScrollViewを持つ単純なViewを持っています。 ScrollViewはflexboxを使用して同じレベルのViewよりも5倍高くなければなりません。

<View style={{ flex: 1}}> 
 
    <View style={{flex: 1, backgroundColor: 'powderblue'}}> 
 
     <Text>Add new stuff</Text> 
 
     <Button title="Browse Gallery" onPress={ openGallery } /> 
 
    </View> 
 
    <ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}> 
 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
 
    </ScrollView> 
 
    </View>

だから私は単純にフレックス追加：1とフレックス：子どもビューに5が、レンダリングされたビューでは、それらの両方は、画面の半分に正確にフィット。 2つのflex属性が無視されるように見えます...

Btw、ScrollViewの代わりに2番目のビューを使用するとうまくいきます！

ScrollViewで1：5の比率を達成する方法はありますか？

Answer 1

ScrollViewは、flexの使用を継承しないコンポーネントです。あなたがしたいことは、あなたが望むフレックス比を作成するビューにScrollViewをラップすることです。

<View style={{flex: 1}}> 
    <View style={{flex: 1, backgroundColor: 'powderblue'}}> 
     <Text>Add new stuff</Text> 
     <Button title="Browse Gallery" onPress={ openGallery } /> 
    </View> 
    <View style={{flex: 5}}> 
     <ScrollView style={{backgroundColor: 'skyblue'}}> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
     </ScrollView> 
    </View> 
    </View> 

Answer 2

1達成するために：親ビューに対する子コンポーネントの表示とScrollViewを持つ、5画面比率を、あなたは次のようにそれをコーディングすることができます説明のため

<View style={{ flex: 1}}> 
    <View style={{flex: 1/5, backgroundColor: 'powderblue'}}> 
     <Text>Add new stuff</Text> 
     <Button title="Browse Gallery" onPress={ openGallery } /> 
    </View> 
    <ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
    </ScrollView> 
    </View>