当前行为

Question

当前行为

我的代码：

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 }
})

Feed组件的渲染只是一堆行：

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

预期行为

预期的行为是在两种情况下获得平滑的滚动效果。但是，DrawerNavigator屏幕的滚动效果非常严格。当我从上到下快速滑动手指时，它不会像在Stacknavigator示例中那样自动平滑滚动。

如何重现

在上面创建App.js文件并创建一个简单的Feed.js组件，该组件包含许多行以使ScrollView正常工作。

有人可以帮忙吗？

更新：现场演示：https://snack.expo.io/Hk8Np7nPG

Answer 1

试试这个

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

这对我有用...... 希望它也能帮到你

Answer 2

您可以使用NativeBase标准选项卡Container和Contet（如ScrollView）标题和...

首先尝试：

npm install native-base --save

然后：

npm i
react-native link

这是您的完整示例代码：

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>
     )}
}

如果你想改变速度，只需 ScrollView 试试：

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

NativeBase中的

使用THIS LINK

React Native：使用DrawerNavigator

当前行为

预期行为

如何重现

2 个答案: