0

I want to make an item in my React-Native DrawerNavigation that is just a clickable link that opens the user's browser to a link.

Here is the main code:

File: /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,

I've tried replacing [constants.patientAuthorizedRoutes.help]: "Help", with [constants.patientAuthorizedRoutes.help]: { screen: Linking.openURL('https://www.helplink.com') }

But this causes the app to start up with automatically opening the browser to that link first thing without the user doing anything.

I've also tried creating an whole separate component for "Help", which all it did was to trigger opening the browser to that link. This actually worked, BUT for some reason it can only be done once, if a user tried to click on "Help" a second time, they are just taken to a blank white screen. Here is that code:
Added to file /src/routes/AuthorizedNavigator.js:

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

File: 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;

File: 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);
4

2 回答 2

2

您可以通过在 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/

于 2020-07-15T07:59:43.643 回答
0

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

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

于 2019-10-06T19:06:40.550 回答