时间戳

首页 > 解决方案 > How to make an React DrawerNavigator item just be a clickable link

react-native - How to make an React DrawerNavigator item just be a clickable link

问题描述

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);

标签： react-nativereact-navigationreact-navigation-drawer

解决方案

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

推荐阅读