Как сделать элемент React DrawerNavigator просто интерактивной ссылкой - PullRequest
Новая
       21

Как сделать элемент React DrawerNavigator просто интерактивной ссылкой

0 голосов
/ 06 октября 2019

Я хочу сделать элемент в своем 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);

1 Ответ

0 голосов
/ 06 октября 2019

Причина, по которой ваше второе решение работает только в первый раз, заключается в том, что как только вы открываете его в первый раз, компонент визуализируется. В тот момент, когда вы покидаете его, компонент остается подключенным, не вызывая на нем второго рендеринга.

Решением для этого является использование withNavigationFocus HOC, обеспечиваемого реагирующей навигацией.

First ofвсе, что вам нужно, чтобы импортировать и поместить его вокруг компонента экрана: 

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

...