使用 DrawerNavigator [React native] 导航到 URL/Deep Link

Posted 2023-04-13

【中文标题】使用 DrawerNavigator [React native] 导航到 URL/Deep Link

【英文标题】：Navigate to URL/Deep Link with DrawerNavigator [React native]

【发布时间】：2018-05-01 06:39:32

【问题描述】：

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

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

【问题讨论】：

本期讨论了当前的可能性：github.com/react-community/react-navigation/issues/73

【参考方案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>
    );
  

【讨论】：

只想说这个答案是 2021 年使用 React Navigator 5 和可能 6 的方式。感谢您花时间添加更新的答案。