使用DrawerNavigator导航到URL /深层链接[React native]

Question

我们如何从导航器条目中打开链接？例如，例如：

 const Home = DrawerNavigator ({
     Account: { screen: Account },
     Availability: { screen: Availability },
     Favorites: { screen: Favorites },
     Website: { screen: Linking.openURL('http://www.example.com') },   }

Answer 1

我知道不久前有人问过这个问题，但我最近遇到了这种需求并找到了一个可行的解决方案。

您首先要使用以下命令建立抽屉createDrawerNavigator：

import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import { Linking } from 'react-native';

const Drawer = createDrawerNavigator();

使用最新版本的react-native导航，我们无法像您一样将字段传递给DrawerNavigator。设置抽屉及其导航内容的一种方法如下：

return (
        <Drawer.Navigator
          initialRouteName="Account"
          drawerPosition="right"
          drawerContentOptions={{
            activeTintColor: 'white',
            inactiveTintColor: 'blue',
            activeBackgroundColor: 'blue',
            labelStyle: {
              fontFamily: 'Arial',
              fontSize: 18,
              textTransform: 'uppercase',
              paddingTop: 5
            }
          }}
          drawerContent={props => <CustomDrawerContent {...props}/>}
        >
          <Drawer.Screen name="Account" component={Account} />
          <Drawer.Screen name="Availability" component={Availability} />
          <Drawer.Screen name="Favorites" component={Favorites} />
          {/* Custom Links (defined next) */}
        </Drawer.Navigator>
      );

我添加了我的return声明以表明这就是我在屏幕上呈现的内容。drawerContentOptions显示您可以传递到抽屉的参数之一。所有选项均在此处定义： https ://reactnavigation.org/docs/drawer-navigator/

接下来，我们要创建我们在道具之一中引用的自定义抽屉内容Drawer.Navigator。您还可以像我们之前对抽屉导航项所做的那样应用非常相似的道具。请记住，所有自定义链接都将显示在Drawer.Screen之前引用/定义的组件下方。这是由于DrawerItemList {...props}>该行接受定义的导航链接列表并将其显示在我们的自定义链接之前。您可以反转此设置，以便首先显示自定义内容，但我不确定您是否可以将自定义链接放在中间。

// set up custom links for main navigation drawer
  function CustomDrawerContent(props) {
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem
          label="Website"
          inactiveTintColor={'blue'}
          labelStyle= {{
            fontFamily: 'Arial',
            fontSize: 18,
            textTransform: 'uppercase',
            paddingTop: 5
          }}
          onPress={() => Linking.openURL('http://www.example.com')}
        />
      </DrawerContentScrollView>
    );
  }