Scroll View inside view not working react native

问题

Here I am trying a simple code but the scroll view is not working if kept inside another view. Code is like this:

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

    <ScrollView>

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

      </ScrollView>

  </View>
 );

But if scroll view kept as parent view it works perfectly. Code is as below:

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

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

  </ScrollView>
 );

Now the problem is I don't want my toolbar to scroll up and down, I just want the contents below the toolbar to move. How can I achieve that?

And next question: Is scroll view has to be parent view to be returned to work?

回答1:

you should wrap toolbar in view like this:

<View><Toolbar/></View>

Wrap those component which you want to scroll inside scrollview as:

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

And provide flex to root view as:

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

Finally your code will run as you expected.

回答2:

Use the property flexGrow in the style, flex didnt worked for me.

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

回答3:

Top <View> must has style flex:1, and also <ScrollView> has too

回答4:

If you are using <Form> from native base and you want to scroll then use KeyboardAwareScrollView

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

this will work on Android

来源：https://stackoverflow.com/questions/38137388/scroll-view-inside-view-not-working-react-native

标签

reactjs

react-native

react-native-android