React Native：ScrollViewを使用したときの垂直方向のセンタリング

Question

React Nativeを使用していて、ScrollViewを導入するとすぐに要素の垂直方向のセンタリングを保持できません。デモンストレーションのために、React Native Playgroundで3つのアプリを作成しました。すべての例は2ページあり、青いボタンをタップすることで切り替えることができます。

例1：

flex: 1, 
flexDirection: 'column', 
justifyContent: 'center', 

https://rnplay.org/apps/lb5wSQ

を但し：

この最初の例では、ブロックは、容器がそれに適用されるこれらのスタイルを持っているので、これが起こる2ページの垂直中心示しますページの内容全体が収まらないため、ページ2に切り替えるとすぐに問題が発生するため、ScrollViewが必要です。この例では

例2

、私はScrollViewの中にすべてを包みます。これは、2ページをスクロールすることができますが、今私は、ページの垂直方向のセンタリングを失っ1.

https://rnplay.org/apps/DCgOgA

例、Iを試してみて、1ページの垂直方向のセンタリングを取り戻すためには3

ScrollViewのcontentContainerStyleにflex: 1を適用してください。これは、1ページの垂直方向のセンタリングを修正しませんが、私はもはや私がの垂直センタリングを得るように私はこの問題を解決することができますどのように2ページ

https://rnplay.org/apps/LSgbog

上の一番下まですべての方法をスクロールすることができますよページ1の要素はまだ2ページの下にスクロールするためにScrollViewを取得しますか？

Answer 1

ScrollView内で2ページ目のみをラップするのはなぜですか？ちょうどあなたの最初の例を変更

return (
    <ScrollView > 
     <View style={styles.lipsum}> 
      {this.renderButton()} 
      <Text style={styles.lipsumText}>{lipsumText}</Text> 
     </View> 
    </ScrollView> 
); 

、それは魔法のように動作します:)

Answer 2

EDIT：あなたは今<ScrollView contentContainerStyle={{flexGrow: 1}}>を使用することができます。

flexGrowをサポートしていないReact Nativeの古いバージョンの場合は、以下の解決策を使用してください。

---

私は確実にiOSとAndroidの両方のためにこれを行うに発見した唯一の方法は、ScrollViewの大きさに内側のビューのminHeightを設定することです。例えば：

<ScrollView 
    style={{flex: 1}} 
    contentContainerStyle={{minHeight: this.state.minHeight}} 
    onLayout={event => this.setState({minHeight: event.nativeEvent.layout.height})} 
> 

注：私は簡単にするためにイン並ぶスタイルと機能以上を持っていますが、あなたはおそらく変わらない値に対して一定の参照を使用して、不要な再レンダリングを防ぐために、変化のスタイルを暗記したいと思うでしょう。

const {minHeight} = this.state; 
// Manually memorise changing style or use something like reselect... 
if (this.lastMinHeight != minHeight) { 
    this.lastMinHeight = minHeight; 
    this.contentContainerStyle = {minHeight: minHeight} 
} 
<ScrollView 
    style={styles.scrollViewStyle} 
    contentContainerStyle={this.contentContainerStyle} 
    onLayout={this.onScrollViewLayout} 
> 

Answer 3

（のみ現時点では残念ながらiOS版）の新しいソリューションがあります - 私たちはScrollviewにcenterContent小道具を使用することができます。

Answer 4

私は、これはScrollViewを埋めるために、コンテンツコンテナのストレッチになりますが、最大の高さを制限するものではありませんので、内容が延びたとき、あなたはまだ正確にスクロールすることができます代わりに

<ScrollView contentContainerStyle={{flexGrow: 1}}>

フレックス

のflexGrowでこの問題を解決しましたここでScrollView

Answer 5

の境界は私のアプローチです：

は、スクロールビューはを持っている必要があり、flex : 1と外側容器を使用してくださいはであり、styleではありません。

<View style={styles.mainContainer}> 
    <ScrollView 
    contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}> 
     <View style={styles.scrollViewContainer}> 
     //Put your stuff here, and it will be centered vertical 
     </View> 
    </ScrollView> 
</View> 

スタイル：

const styles = StyleSheet.create({scrollView : { 
height : Dimensions.get('window').height, }, mainContainer : { 
flex : 1 }, scrollViewContainer : { }, })