Question

我通过createDrawerNavigator创建了一个切换菜单。起初，菜单运行良好，但是制作完每一页后，我意识到它没有像以前一样垂直滚动。我不明白问题是什么。此外，当每个页面有错误时，在单击该页面后，应用程序将冻结，并且菜单会滚动！有什么帮助吗？非常感谢。请参见此处的菜单calendar table

//imports;
class NavigationDrawerStructure extends React.Component {
    toggleDrawer = () => {
        this.props.navigationProps.toggleDrawer();
    };
    render() {
        return (
            <View style={{ flex: 1 }}>
                <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
                    <Image
                        source={require('./image/drawer.png')}
                        style={{ width: 30, height: 30, marginLeft: 20, marginBottom:10 }}
                />
                </TouchableOpacity>
            </View>
        );
    }
}

const firstScreen = createStackNavigator({
    Data: {
        screen: Data,
        navigationOptions: ({ navigation }) => ({
            title: 'Data',
            headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
                backgroundColor: '#fff',
            },
            headerTintColor: 'black',
        }),
    },
});


const screensDrawerNavigator = createDrawerNavigator(
    {
        Data: {
            screen: firstScreen,
            navigationOptions: {
                drawerLabel: 'Data',
            },
        },
    },
    {
    intialRouteName: 'login',
    navigationOptions: {
      headerStyle : {
        backgroundColor: '#f4511e',
      },
        color: 'white',
      },
    },
  }
)


export default createAppContainer(screensDrawerNavigator);


  [1]: https://i.stack.imgur.com/FwoqI.jpg

Answer 1

根据文档，您似乎无法默认滚动，因为默认情况下没有添加任何scrollview组件。也许您可以尝试从以下示例中添加自定义组件：https://reactnavigation.org/docs/en/drawer-navigator.html

我认为在您的情况下，它会与此相似（请参阅contentComponent）：

const screensDrawerNavigator = createDrawerNavigator(
    {
        Data: {
            screen: firstScreen,
            navigationOptions: {
                drawerLabel: 'Data',
            },
        },
    },
    {
    intialRouteName: 'login',
    contentComponent: props => (
        <ScrollView>
          <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
          </SafeAreaView>
        </ScrollView>
      ),
    navigationOptions: {
      headerStyle : {
        backgroundColor: '#f4511e',
      },
        color: 'white',
      },
    },  
)

创建其他页面后，Drawing Navigator不滚动

1 个答案: