React 导航 Stack Navigator 组件didMount答案

【问题标题】：React navigation Stack Navigator componentdidMountReact 导航 Stack Navigator 组件didMount
【发布时间】：2018-07-30 21:38:56
【问题描述】：

我正在使用反应导航。使用堆栈导航器和嵌套在其中的抽屉。如何在下面的代码中调用 componentdidmount 和 this.props.navgation.navigate。我有一些事件应该将用户导航到特定屏幕，而不是遵循 Drawer 的初始路线。

 import React from "react";
    import { Platform, Text } from "react-native";
    import { Root } from "native-base";
    import { StackNavigator, DrawerNavigator} from "react-navigation";
    import Register from "./components/Register";
    import Home from "./components/home/";
    import Dashboard from "./components/Dashboard/";
    import SideBar from "./components/sidebar";
    import Screen1 from "./components/Screen1/";
    import Screen2 from "./components/Screen2/";
    import Screen3 from "./components/Screen3/";

    const Drawer = DrawerNavigator(
      {
        Dashboard: { screen: Dashboard },
        Screen1: { screen: Screen1 },
        Screen2 : { screen: Screen2 },
      },
      {
        navigationOptions: {
          gesturesEnabled: false,
        },
       initialRouteName: "Dashboard",
        contentOptions: {
          activeTintColor: "#e91e63"
        },
        drawerPosition: 'right',
        contentComponent: props => <SideBar {...props} />
      }
    );


    const AppNavigator = StackNavigator(
        {
            Home: { screen: Home },
            Register: { screen: Register },
            Drawer: { screen: Drawer },
            Screen3: { screen: Screen3 },
        },
        {

             headerMode: "none",

        }
    );


//HOW TO WRITE COMPONENTDIDMOUNT HERE AND CALL //THIS.PROPS.NAVIGATION.NAVIGATE
    export default () =>
        <Root>
            <AppNavigator />
        </Root>;

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您不是在创建组件，那么您将无法在此处“写入”ComponentDidMount。

<Root> 拥有自己的 componentDidMount，它会在您渲染时运行。

请务必充分了解 React 和 JSX 如何协同工作： https://reactjs.org/docs/rendering-elements.html

【讨论】：