从 react-native / react-navigation 中的超级组件调用子反应导航道具

Question

我有一个使用反应导航的反应原生应用程序。我的应用程序中有以下结构。

class MainContainer extends Component {

render() {
    return (

    <View style={{ flex: 1 }}>

    <Header
      backgroundColor={appcolors.primaryColor}
      leftComponent={<TouchableOpacity onPress={() => this.props.navigation.toggleDrawer() }><Feather name='align-justify' size={24} color='white' /></TouchableOpacity>}
      centerComponent={{ text: this.props.headerTitle , style: { color: 'white' } }}
    />

    <MainDrawerNavigation/>

    </View>

   );
}
}; 

而<MainDrawerNavigation/> 是一个反应导航组件，如下所示。

MainDrawerNavigation = createDrawerNavigator({
    XScreen: {
      screen: XScreen,
    },
    YScreen: {
      screen: YScreen,
    },
    ZScreen: {
      screen: ZScreen,
    },
},{
  }
});

尝试从MainContainer 调用this.props.navigation.toggleDrawer() 时出错。然后出于测试目的，我向XScreen 添加了一个按钮，并尝试切换抽屉并成功。所以我想知道有没有办法将子导航道具传递给超级视图。所以我可以从MainContainer 调用this.props.navigation.toggleDrawer() 方法和控制抽屉。或任何可用于解决此问题的导航实践。

PS：我得到的错误是_this2.props.navigation.toggleDrawer is not a function

Answer 1

在MainContainer 中，this.props.navigation 没有启动，所以你得到了这样的错误。您只能在 MainDrawerNavigation 的子组件内访问它，即仅 XScreen、YScreen 和 ZScreen。

为了获得最佳实践，您需要设计所有组件将如何导航到您的应用中并将Navigator 对象/组件作为根组件传递。

有多个导航器，您可以阅读它们react navigation api doc。

一个简化的应用需要 SwitchNavigator、DrawerNavigator、TabBarNavigator 和 StackNavigator。

切换导航器：

用于用户认证。它将控制在两个组件之间切换（仅供参考，组件可以是 Navigator 或 React.Component）。

export const AuthNavigator = SwitchNavigator(
  {
    AuthLoading: { screen: AuthLoadingScreen },
    App: { screen: AppDrawer},
    Auth: { screen: AuthStack}
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

for more details

抽屉导航器：

用于在屏幕左侧或右侧显示侧面板或滑动视图。所以，您可以直接将此组件传递给 SwitchNavigator 的认证成功屏幕。

export default const AppDrawer = DrawerNavigator(
  {
    Home: { screen: TabBarNav },
    Notes: { screen: NotesStack },
    Invite: { screen: InviteContactsStack },
    Files: { screen: FilesStack },
    Settings: { screen: SettingsStack }
  },
  {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <LeftSidePanel {...props} />
  }
);

标签栏导航器：

默认情况下用于在iOS底部显示标签栏，在Android顶部显示标签栏。这可以自定义。

export default const TabBarNav = TabNavigator(
  {
    ChatsTab: {
      screen: ChatsStack,
      navigationOptions: {
        tabBarLabel: "Chats"
      }
    },
    InviteContacts: {
      screen: InviteContactsStack,
      navigationOptions: {
        tabBarLabel: "Invite"
      }
    },
    Notifications: {
      screen: NotificationsStack,
      navigationOptions: {
        tabBarLabel: "Notifications"
      }
    },
    Tasks: {
      screen: TasksStack,
      navigationOptions: {
        tabBarLabel: "Tasks"
      }
    }
  },
  {
    tabBarPosition: "bottom",
  }
);

堆栈导航器：

顾名思义，它将容纳一堆组件。因此，当从抽屉中选择任何项目时，您可以直接在该屏幕中放置一个 StackNavigator。

export default const ChatsStack = StackNavigator({
  Chats: {
    screen: Chats
  },
  Messages: {
    screen: Messages
  }
});

您可以阅读Spencer Carli's blog on medium，其中有代码解释。

请告诉我它是否满足您的需求。