如何使 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]: { screen: Linking.openURL('https://www.helplink.com') }替换[constants.patientAuthorizedRoutes.help]: "Help",

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

我还尝试为"帮助"创建一个完整的单独组件，它所做的只是触发打开浏览器到该链接。 这实际上有效，但由于某种原因只能执行一次，如果用户尝试第二次单击"帮助"，他们只会被带到空白的白屏。这是代码：
添加到文件/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

您可以通过在 CustomDrawerComponent 中添加抽屉项来执行相同的操作。

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/

Answer 2

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

对此的解决方案是使用 react 导航提供的withNavigationFocusHOC 。

首先，您需要导入它并将其放在屏幕组件周围：

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