いくつかの入力フィールドを含むScrollViewと、画面の下部にあるボタン（実際には通常のViewの2つのボタン）を備えた画面を作成したいと思います。これはかなり簡単なはずですが、ボタンを画面の一番下に配置したいScrollView に画面全体を埋めるのに十分な要素がない場合でも、ボタンは表示されます。絶対位置指定を使用することもできますが、ScrollView は画面よりも大きく (高く) なる可能性があり、この場合、ボタンは ScrollView の最後に配置する必要があります (つまり、ボタンは画面から外れるため、ユーザーはボタンを見るために下にスクロールする必要があります)。
いろいろ試してみましたが、ボタンは常に ScollView 内の他の要素のすぐ後に表示されます。
画像では、スクロールビューには青い境界線があり、ボタンを含む通常のビューには黒い境界線があります。
どのようなご提案でも歓迎いたします。
ベストアンサー1
最善の解決策を見つけました。
鍵となるのはコンテンツコンテナスタイルプロパティ (ドキュメント:https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle）。「これらのスタイルは、すべての子ビューをラップするスクロール ビュー コンテンツ コンテナーに適用されます。」
設定後flexGrow: 1、justifyContent: 'space-between'、flexDirection: 'column'contentContainerStyleでは、justifyContent: 'flex-start'テキストを含む上部のコンテナビュー、およびjustifyContent: 'flex-end'ボタン付きの下部コンテナー ビュー用。
<ScrollView
contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}
style={{ backgroundColor: 'white', paddingBottom: 20 }}
>
<View style={{ flex: 1, justifyContent: 'flex-start' }}>
<Text>Some text with different length in different cases, or some input fileds.</Text>
</View>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<View>
<TouchableOpacity style={[commonStyles.greenButton, styles.buttonPadding]}>
<Text style={commonStyles.greenButtonTitle}>Next</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity style={styles.cancelButtonContainer}>
<Text style={styles.cancelButton}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>;