2016-08-12 8 views
3

私はScrollViewを持っていますが、必ずしもそのサイズを超えるとは限りません。エラーが発生したときにエラーメッセージが追加され、そのサイズがScrollViewを超えているため、そのスクロールを使用しているのは、フォームのように見えます。ScrollView minHeightすべての領域を占有します

私はコンテンツが常に少なくともScrollViewのサイズと同じであることを望んでいます。私はminHeightプロパティを知っていますが、私が使用するために見つけた唯一の方法は再レンダリングです。私は避けたいものです。

私は、状態管理のための再来を使用していますし、これは私がthis.props.setScrollContentHeightがオン状態の高さに入るアクションをトリガー

<ScrollView 
 
    contentContainerStyle={[ownStyles.container, {minHeight: this.props.scrollHeight}]} 
 
    style={this.props.style} 
 
    showsVerticalScrollIndicator={false} 
 
    onLayout={(event) => { 
 
    scrollHeight = event.nativeEvent.layout.height; 
 
    this.props.setScrollContentHeight(scrollHeight); 
 
    }} 
 
>

を持っているものである、とthis.props.scrollHeightは述べている高さ。そのため、最初のレンダリングの後にonLayout関数がトリガされた後、状態はScrollViewのheightで更新され、それを次に内容としてminHeightとして割り当てます。

コンテンツのスタイルをflex: 1に設定すると、ScrollViewはスクロールしません。

パフォーマンス上の理由から2番目のレンダリングを避ける方法はありますか?

ありがとうございました!

+0

'height:100%;を使用してもジョブは実行されませんか? –

+0

はこれを参照してください:https://github.com/facebook/react-native/issues/3422 – JainZz

答えて

1

私はこれが少し遅いと知っていますが、その中に内容を包み込むと考えています。とminHeightスタイルのプロパティが入っています。

0

ScrollViewの場合はflexGrow: 1、ScrollViewの場合はflex: 1を使用して、ScrollAbleを取得する必要がありますが、少なくとも可能な限り大きいものは<View>です。

discussion about it in react-nativetushar-singhには素晴らしいアイデアがありました。

関連する問題