如何使React DrawerNavigator项成为可单击的链接

Question

我想在我的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);

Answer 1

第二种解决方案仅在第一次使用时才起作用的原因是，第一次打开它时，组件将被渲染。当您离开它时，该组件将保持安装状态，而不会在其上触发第二次渲染。

解决方案是使用反应导航提供的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