Question

我正在使用React Native和React Navigation。

我有一个名为App.js的组件，在其中声明了React-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,
    }
);

Answer 1

将此作为一个类，例如

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

constructor(props) {
    super(props)

    this.state = {

    }
}

Answer 2

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

因此您可以尝试类似的操作（此处的道具是传递给customDrawerComponent的道具）：

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

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

Answer 3

从您的问题中我了解到您要么想要：-

从组件外部导航
从没有导航道具的组件中导航。

为此，我尝试了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 个答案: