你如何导航到另一个没有收到 react 导航 props 的组件？答案

【问题标题】：How do you navigate to another component that does not receive the props of react navigation?你如何导航到另一个没有收到 react 导航 props 的组件？
【发布时间】：2018-09-27 05:55:49
【问题描述】：

我正在使用 React Native 和 React Navigation。

我有一个名为 App.js 的组件，我在其中声明了 React-Navigation 的 Drawer Navigation。

在此我可以选择注销，但删除 AsyncStorage 后我无法导航到另一个组件

有人知道如何实现吗？

谢谢。

这是我的代码：

App.js

import { createDrawerNavigator, DrawerItems, NavigationActions } from 'react-navigation';

const customDrawerComponent = (props) => (
    <SafeAreaView style={{ flex: 1 }}>
            <ScrollView>
                <DrawerItems
                    {...props}
                />
                <TouchableOpacity  style={styles.button} onPress={this.logOut} >
                    <Text> Logout </Text>
                </TouchableOpacity>
            </ScrollView>
    </SafeAreaView>
);

logOut = () => {
        // NOT WORKS
        // this.props.navigation.navigate('Login')

        //NOT WORKS:
    this.myAction();
}

myAction = () => {
    const nav = NavigationActions.navigate({
      routeName: 'App',
    });
    return nav;
  };

const AppDrawNavigator = createDrawerNavigator(
  {
    MainComponent: { screen: MainComponent,
        navigationOptions: ({navigation}) => ({
            drawerLockMode: 'locked-closed'
          }) },
    Login: { screen: LoginComponent,
        navigationOptions: ({navigation}) => ({
            drawerLockMode: 'locked-closed'
          }) },
    User: { screen: UsersComponent }
    },
    {
        contentComponent: customDrawerComponent,
    }
);

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

把它做成一个类

导出默认类 App 扩展 React.Component {

constructor(props) {
    super(props)

    this.state = {

    }
}

【讨论】：

谢谢，但不起作用：“无法读取未定义的属性'导航'” :(

【解决方案2】：

根据您的问题，我了解到您想要：-

从组件外部导航
从没有导航属性的组件导航。

为此，我尝试了 2 种解决方案，尽管我基于第二种解决方案，但两者都工作得非常好。

第一个解决方案

使用react-navigation 包中的withNavigation。如果您的组件嵌套很深，除非您手动指定它们或将它们放在上下文中，否则它们将没有导航道具；传递导航道具变得非常痛苦。所以改为使用 withNavigation 并且您的组件将具有导航属性。

import {withNavigation} from "react-navigation";

const Component = ({navigation}) => {
  const onPress = () => {
    navigation.navigate(//ROUTE_NAME//)
  }
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>Navigate</Text>
    </TouchableOpacity>
  )
}

export default withNavigation(Component);

第二个解决方案

创建一个帮助脚本并使用它。

"use strict";

import React from "react";
import {NavigationActions} from "react-navigation";

let _container; // eslint-disable-line


export const navigation = {
  mapProps: (SomeComponent) => {
    return class extends React.Component {
      static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
      render () {
        const {navigation: {state: {params}}} = this.props;
        return <SomeComponent {...params} {...this.props} />;
      }
    }
  },
  setContainer: (container) => {
    _container = container;
  },
  reset: (routeName, params) => {
    _container.dispatch(
      NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({
            type: "Navigation/NAVIGATE",
            routeName,
            params
          })
        ]
      })
    );
  },
  goBack: () => {
    _container.dispatch(NavigationActions.back());
  },
  navigate: (routeName, params) => {
    _container.dispatch(
      NavigationActions.navigate({
        type: "Navigation/NAVIGATE",
        routeName,
        params
      })
    );
  },
  navigateDeep: (actions) => {
    _container.dispatch(
      actions.reduceRight(
        (prevAction, action) =>
          NavigationActions.navigate({
            type: "Navigation/NAVIGATE",
            routeName: action.routeName,
            params: action.params,
            action: prevAction
          }),
        undefined
      )
    );
  },
  getCurrentRoute: () => {
    if (!_container || !_container.state.nav) {
      return null;
    }

    return _container.state.nav.routes[_container.state.nav.index] || null;
  }
};

在您挂载导航调用时在您的父组件中：-

"use strict";

import React from "react";
import App from "./routes";
import {navigation} from "utils";

class Setup extends React.Component {
  render () {
    return (
      <App
        ref={navigatorRef => {
          navigation.setContainer(navigatorRef);
        }}
      />
    );
  }
}

export default App;

现在，在您的组件中，您可以直接使用该脚本本身的帮助程序，并且现在可以在全球范围内访问导航。

import {navigate} from "utils/navigation";

更多详情可以this跟帖

【讨论】：

【解决方案3】：

您的注销功能是在导航器之外声明的。这意味着您无权访问那里的导航道具。但是，您的 customDrawerComponent 是您的 Navigator 的一个屏幕，它应该可以访问它。

所以你可以尝试这样的事情（这里的 props 是传递给 customDrawerComponent 的 props）：

onPress={()=> {props.navigation.navigate("Login")}}

另外，您的 App.js 似乎有点奇怪，因为您没有导出任何组件。您是粘贴了 App.js 的全部代码还是只粘贴了部分代码？

【讨论】：