使用DrawerNavigator导航至URL/深层链接[React原生]

ztigrdn8  于 2023-03-09  发布在  React
关注(0)|答案(2)|浏览(162)

如何从导航器条目中打开链接?例如:

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

lf5gs5x21#

我知道这是问了一段时间前,但我最近遇到了这种需要,并找到了一个工作的解决方案。
首先要使用createDrawerNavigator建立抽屉:

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

const Drawer = createDrawerNavigator();

在最新版本的react-native navigation中,我们无法像您现在这样将字段传递给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>
    );
  }
zhte4eai

zhte4eai2#

如果万一有人遇到这种情况,这就是我在2023年解决这个问题的方法。
基本上,您必须将路径嵌套在传递给导航容器的linking对象中。

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="favorites"
        component={Favorites}
      />
    </Drawer.Navigator>
  )
}

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Drawer"
        component={DrawerNavigator}
      />
    </Stack.Navigator>
  )
}

export default function App() {
  const linking = {
    prefixes: [<YOUR_PREFIX>],
    config: {
      screens: {
        Drawer: {
          screens: {
            favorites: "favorites",
          },
        },
      },
    },
  };
  return (
    <>
      <NavigationContainer linking={linking}>
        <StackNavigator />
      </NavigationContainer>
    </>
  );
}

相关问题