3つのビューがあります:1つは上部、中間、下部です。スクロールビューは画面全体を占めます。問題は、スクロールビューがスクロールできないことです。
<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}>
<View><SomeContent /></View>
<View><SomeContent /></View>
<View><SomeContent /></View>
</ScrollView>
flex: 1
スクロールビューを削除すると、画面の約50%がかかります。下の画像のように、上、中、下の要素でスクロールビューを作成する方法を教えてください。
一番下の要素は常に一番下にありますが、一番上の2つのコンポーネントの高さが大きい場合は、スクロールビューを使用して上下に移動できるように一番下のコンポーネントを押し下げます。
Flexの代わりにflexGrowを使用します。サンプルコードを以下に示します。
<ScrollView
contentContainerStyle={{
flexGrow: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}}>
<View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />
<View style={{ width: 50, height: 50, backgroundColor:'black'}} />
<View style={{ width: 50, height: 50, backgroundColor:'blue'}} />
</ScrollView>
これがスクリーンショットです
Flex:1を削除すると、ビューの正確な高さのみが表示されます。
<ScrollView contentContainerStyle={{ backgroundColor: '#00ff00',
flexDirection: 'column', justifyContent: 'space-between' }}>
<View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
<View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
<View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
</ScrollView>
Flex:1またはflexGrow:1を設定すると、ScrollViewは最小高さを画面の高さに設定します。
<ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00',
flexDirection: 'column', justifyContent: 'space-between' }}>
<View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
<View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
<View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
</ScrollView>
ビューの累積高さがこれよりも大きい場合、ビュー全体が画面の高さを超えて広がります。この場合、flexGrow:1(下に部分的にスクロールして表示)、コンテンツまでスクロールできますが、flex:1は切り取ります。
<ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00',
flexDirection: 'column', justifyContent: 'space-between'}}>
<View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} />
<View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
<View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
</ScrollView>
そこから、各ビューにflexを設定して、ビューが空白スペースを埋める方法に重みを付けることができます。たとえば、上2つのビューのそれぞれにflex:1を設定し、下のビューにflex:2を設定すると、コンテンツの高さを考慮してafterが表示され、下のビューは上位2つのビューのそれぞれについて、全体の高さの1/2から1/4を指定します。このような:
<ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00',
flexDirection: 'column', justifyContent: 'space-between'}}>
<View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
<View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} />
<View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} />
</ScrollView>
ScrollViewドキュメント: https://facebook.github.io/react-native/docs/scrollview.html