如何在本机反应中滚动抽屉导航器内的屏幕选项答案

【问题标题】：How to scroll the screen options inside the drawer navigator in react native如何在本机反应中滚动抽屉导航器内的屏幕选项
【发布时间】：2019-08-12 12:58:00
【问题描述】：

我的抽屉导航器中有许多屏幕选项。因此，我想向下滚动以查看可用的屏幕。所以我想滚动抽屉导航器内的屏幕选项。那么如何滚动抽屉导航器以查看所有其他屏幕选项

const LeftNavigator = createDrawerNavigator({
      Home: {
        screen: BottomNavigator,
          navigationOptions: navOpt => ({
            drawerLabel: ({ focused }) => (
              <DrawerItem focused={focused} screen="BottomNavigator" title="Home" />
            )
          })
        },
      BankAndFinanceScreen: {
        screen: BankAndFinanceScreenDrawerStack,
          navigationOptions: navOpt => ({
            drawerLabel: ({ focused }) => (
              <DrawerItem focused={focused} screen="BankAndFinanceScreenDrawerStack" title="Bank & Finance" />
            )
          })
        },
      ComplaintScreen: {
        screen: ComplaintScreenStack,
         navigationOptions: navOpt => ({
            drawerLabel: ({ focused }) => (
              <DrawerItem focused={focused} screen="ComplaintScreenStack" title="Complaints" />
            )
          })
      },
      UserProfile: {
        screen: UserProfileStack,
        navigationOptions: navOpt => ({
          drawerLabel: ({ focused }) => (
            <DrawerItem focused={focused} screen="UserProfileStack" title="User Profile" />
          )
        })
      },
      ClaimRefund: {
        screen: ClaimRefundStack,
        navigationOptions: navOpt => ({
          drawerLabel: ({ focused }) => (
            <DrawerItem focused={focused} screen="ClaimRefundStack" title="Claim Refund" />
          )
        })
      },
      },
      ContactUsScreen: { screen: ContactUsScreenStack,
         navigationOptions: navOpt => ({
            drawerLabel: ({ focused }) => (
              <DrawerItem focused={focused} screen="ContactUsScreenStack" title="Contact Us" />
            )
          })
      },    
      },
    });

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

只需在反应导航的抽屉菜单中的主配置对象中设置您的自定义抽屉菜单组件

export default DrawerNavigator({
    // screen 1
    // screen 2
    // screen 3
    // etc..
}, 
{   
    // set navigations config here
    // item below will be your custom drawer
    contentComponent: props => 
    <ScrollView>
      <DrawerItems {...props} />
      <Text>Your Own Footer Area After</Text>
    </ScrollView>
});

查看 react-navigation 文档了解更多详情：

https://reactnavigation.org/docs/en/drawer-navigator.html

【讨论】：