web-dev-qa-db-ja.com

ScrollViewでコンポーネントを下に固定するが、他のコンテンツがそれを押し下げることを許可する方法

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％がかかります。下の画像のように、上、中、下の要素でスクロールビューを作成する方法を教えてください。

Screenshot of an iPhone. The background of the screen is white. It has three boxes that are different shades of blue: one at the top, one in the middle, and one at bottom. The boxes are aligned to the left and there is a lot of white space between the boxes.

一番下の要素は常に一番下にありますが、一番上の2つのコンポーネントの高さが大きい場合は、スクロールビューを使用して上下に移動できるように一番下のコンポーネントを押し下げます。

react-nativeflexbox
25
1110

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>

これがスクリーンショットです

[1]

36
Ijharul Islam

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>

no flex

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>

outer flex

ビューの累積高さがこれよりも大きい場合、ビュー全体が画面の高さを超えて広がります。この場合、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>

scrolled flexGrow

そこから、各ビューに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>

inner flex

ScrollViewドキュメント： https://facebook.github.io/react-native/docs/scrollview.html

10
user7363719