web-dev-qa-db-ja.com

ビュー内のスクロールビューが動作しない

ここでは簡単なコードを試していますが、別のビュー内に保持するとスクロールビューが機能しません。コードは次のとおりです。

  return(
  <View>
    <Toolbar title={this.props.title}>
    </Toolbar>

    <ScrollView>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

      </ScrollView>

  </View>
 );

ただし、スクロールビューが親ビューとして保持されている場合、完全に機能します。コードは次のとおりです。

  return(
  <ScrollView>
    <Toolbar title={this.props.title}>
    </Toolbar>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

  </ScrollView>
 );

ここでの問題は、ツールバーを上下にスクロールさせたくないので、ツールバーの下のコンテンツを動かしたいだけです。どうすればそれを達成できますか？

そして次の質問：スクロールビューは、作業に戻るために親ビューである必要がありますか？

reactjsreact-nativereact-native-android
16
Riten

次のようにビューでツールバーをラップする必要があります。

<View><Toolbar/></View>

Scrollview内でスクロールするコンポーネントを次のようにラップします。

<ScrollView>your expected components...</ScrollView>

また、ルートビューにフレックスを提供します。

<View style={{flex:1}}>

最後に、コードは期待どおりに実行されます。

26
Chiranjhivi Ghimire

スタイルでプロパティflexGrowを使用すると、flexは機能しませんでした。

 <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    ...
</ScrollView>
30
Led Machine

トップ<View>にはスタイルflex:1が必要で、<ScrollView>にもスタイルが必要です

9
Stephen Kingsley

ネイティブベースの<Form>を使用していて、スクロールしたい場合は、KeyboardAwareScrollViewを使用します

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

これはAndroidで動作します

0
Advait Joshi