如何使 React DrawerNavigator 项目只是一个可点击的链接答案

【问题标题】：How to make an React DrawerNavigator item just be a clickable link如何使 React DrawerNavigator 项目只是一个可点击的链接
【发布时间】：2019-10-06 16:30:52
【问题描述】：

我想在我的 React-Native DrawerNavigation 中创建一个项目，它只是一个可点击的链接，可以打开用户浏览器的链接。

这里是主要代码：

文件：/src/routes/AuthorizedNavigator.js

import { createDrawerNavigator } from "react-navigation";
import type { NavigationContainer, NavigationState } from "react-navigation";
import { Linking } from "react-native";

import CustomDrawerComponent from "../stories/commonComponents/CustomDrawerComponent";

import Settings from "./SettingsNavigator";
import constants from "shared/src/utils/constants";
const AuthorizedNavigator: NavigationContainer<
    NavigationState,
    {},
    {}
> = createDrawerNavigator(
    {
        [constants.settings]: Settings,
        [constants.help]: "Help",        <----HERE
    },
    {
        contentComponent: CustomDrawerComponent,

我尝试将[constants.patientAuthorizedRoutes.help]: "Help", 替换为[constants.patientAuthorizedRoutes.help]: { screen: Linking.openURL('https://www.helplink.com') }

但这会导致应用程序在启动时自动打开浏览器到该链接，而无需用户执行任何操作。

我还尝试为“帮助”创建一个完全独立的组件，它所做的只是触发浏览器打开该链接。这实际上有效，但由于某种原因只能完成一次，如果用户再次尝试单击“帮助”，他们只会被带到一个空白的白色屏幕。这是代码：
添加到文件/src/routes/AuthorizedNavigator.js：

import Help from "./HelpNavigator";
.
.
[constants.help]: Help,

文件：patient-mobile/src/routes/HelpNavigator.js

import { createStackNavigator } from "react-navigation";
import type { NavigationContainer, NavigationState } from "react-navigation";

import navigationTabHelper from "../utils/navigationTabHelper";
import Help from "shared/src/screens/Help";

const HelpNavigator: NavigationContainer<
    NavigationState,
    {},
    {}
> = createStackNavigator(
    {
        Help: Help
    },
    {
        initialRouteName: "Help",
        headerMode: "none"
    }
);

HelpNavigator.navigationOptions = navigationTabHelper;

export default HelpNavigator;

文件：shared/src/screens/Help/index.js

import * as React from "react";
import { View } from "native-base";
import { withNavigation } from "react-navigation";
import type { NavigationScreenProp, NavigationState } from "react-navigation";
import { Linking } from "react-native";

type Props = {
    navigation: NavigationScreenProp<NavigationState>
};
type State = {};

class Help extends React.Component<Props, State> {

    openHelpLink = () => {
        Linking.openURL("https://www.helplink.com");
        this.props.navigation.navigate("Settings");
    };


    // something else I tried:
    // componentDidMount() {
    //    Linking.openURL("https://www.helplink.com");
    //    this.props.navigation.navigate("PackageCatalogue");
    // }

    render() {
        return (
            <View>
                {this.openHelpLink()}
            </View>
        );
    }
}

export default withNavigation(Help);

【问题讨论】：

标签： react-native react-navigation react-navigation-drawer

【解决方案1】：

您可以通过在 CustomDrawerComponent 中添加 Drawer Item 来做同样的事情。

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => Linking.openURL('https://mywebsite.com/help')}
      />
    </DrawerContentScrollView>
  );
}

“帮助”将列在其他屏幕下方。

非常适合我，这里是链接https://reactnavigation.org/docs/drawer-navigator/

【讨论】：

【解决方案2】：

您的第二个解决方案仅在第一次时才起作用的原因是，一旦您第一次打开它，组件就会被渲染。离开它的那一刻，组件将保持安装状态，不会触发第二次渲染。

解决方案是使用 react 导航提供的 withNavigationFocus HOC。

首先你需要导入它并将它放在你的屏幕组件周围：

import { withNavigationFocus } from 'react-navigation';
...
...
...
...
export default withNavigationFocus(Help);

所以你的屏幕会变成：

componentDidMount = () => {
   this.openHelpLink()   //triggers at first render
}

componentDidUpdate = (prevProps) => {
   if( this.props.isFocused===true && this.props.isFocused!==prevProps.isFocused) 
      this.openHelpLink()  //triggers on the other screen instances
}

使用 componentDidMount 使渲染器无法渲染某些东西，因此您可以只渲染 null

  render() {
    return null
  }

来源：https://reactnavigation.org/docs/en/with-navigation-focus.html

【讨论】：