如何从抽屉项目链接到外部网站react-native-expo

Question

我这里有这个抽屉

 return (
    <NavigationContainer >
      <Drawer.Navigator initialRouteName="MetalDetector" screenOptions={{
        drawerStyle: {
          backgroundColor: '#8e9dad',
          width: 220
        }
      }}>
        <Drawer.Screen name="MetalDetector" component={Home} options={{
          headerRight: () => (
            <Entypo name="sound" size={24} color="black" /> 
          ),
          drawerLabel: '🛠 MetalDetector'
        }}  />
        <Drawer.Screen name="Settings" component={Settings} options={{drawerLabel: '🛠 Settings'}} />
        <Drawer.Screen name="Calibrate" component={Home} options={{drawerLabel: '💡 Calibration'}}/>
        <Drawer.Screen name="Feedback" component={Home} options={{drawerLabel: '👨‍👩‍👧‍👦 Feedback'}}/>
        <Drawer.Screen name="Website" component={Home} options={{drawerLabel: '🌎 Website'}} />
        
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

我添加了一些抽屉屏幕，例如设置校准反馈和网站，但是我怎样才能使当有人单击网站时他实际上被重定向到网站？

目前我有

<Drawer.Screen name="Website" component={Home} options={{drawerLabel: '🌎 Website'}} />

我尝试添加 onclick 和 onPress 函数，但是在删除组件时出现错误，并且使用该组件时我无法链接到任何地方

我该如何解决这个问题？

Answer 1

您可以使用 drawerContent 属性来做到这一点。看看这个小吃，看看它是如何做的。

Answer 2

老问题，但可能值得一提。

另一种方法是使用抽屉导航器中的

drawerItemPress

事件。来自文档

React.useEffect(() => {
  const unsubscribe = navigation.addListener('drawerItemPress', (e) => {
    // Check the name of the clicked item, if it matches the 'Website` name then prevent the default behavior and redirect to the site
   if(e.name === 'Website') {
     e.preventDefault();
     Linking.openURL(externalLinks);
   }

  });

  return unsubscribe;
}, [navigation]);

PS：只是不确定你是否可以从

e.name

得到名字。可能需要

console.log(e)

看看里面有什么。