简体   繁体   中英

React Native: Not smooth scrolling with DrawerNavigator

Current Behavior

My code:

class App extends Component {
   render() {
    return <Drawer /> {/* rigid scrolling effect */} 
    return <Stack /> {/* smooth scrolling effect if I comment above return statement */} 
  }
}

const Drawer = DrawerNavigator({
  Feed: { screen: Feed }
})

const Stack = StackNavigator({
  Feed: { screen: Feed }
})

And Feed component's render is just a bunch of lines:

render() {
   return <View style={{flex:1}}>
   <ScrollView>
    <Text>random line...</Text>
   // .. more lines to make it scrollable
   </ScrollView>
   </View>
}

Expected Behavior

The expected behavior is to get smooth scrolling effect in both cases. However, DrawerNavigator screen's scrolling effect is extremely rigid. When I swipe my finger quickly from up to down, it doesn't keep scrolling smoothly automatically like it should in Stacknavigator example.

How to reproduce

Create App.js file above and create a simple Feed.js component which has a bunch of lines to make ScrollView work.

Can anybody help?

Update: Live demonstration: https://snack.expo.io/Hk8Np7nPG

Try this

render() {    
        return (
              <View style={{flex:1}}>    
                <ScrollView>
                  <View>
                    {Your Contnet}
                  </View>    
                </ScrollView>    
              </View>
         )}

it is worked for me... hope it'll also worked for you

You can Use NativeBase with standard tabs Container and Contet (like ScrollView ) Header and...

first try :

npm install native-base --save

then:

npm i
react-native link

and here is your full example code:

import React, { Component } from 'react';
import { Content , View , Text } from 'native-base'; //don't need import 'react-native' components

export default class GeneralExample extends Component {
render() {    
    return (
          <Content >    
              <View>
                {Your Contnet}
              </View>    
          </Content>
     )}
}

and if you wanna change the speed just ScrollView try:

<ScrollView decelerationRate={0.5}>
   <View/>
</ScrollView>

in NativeBase Use THIS LINK

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM