Question

我有一个使用React导航的React Native应用程序。我的应用程序具有以下结构。

 $vid = 'zeme';
  $terms =\Drupal::entityTypeManager()->getStorage('taxonomy_term')->loadTree($vid); 
  foreach ($terms as $term) {
    $term_data[] = array(
      'id' => $term->tid,
      'name' => $term->name
    );
  }

和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, }, },{ } });调用this.props.navigation.toggleDrawer()时出现错误。然后出于测试目的，我在MainContainer上添加了一个按钮，并尝试切换抽屉，这是成功的。所以我想知道有什么方法可以将儿童导航道具传递给超级视图。因此，我可以从XScreen调用this.props.navigation.toggleDrawer()方法并控制抽屉。或任何可用于解决此问题的导航方法。

PS：我得到的错误是MainContainer

Answer 1

在MainContainer中，this.props.navigation未启动，因此出现了这样的错误。您只能在MainDrawerNavigation的子组件中访问它，即仅XScreen，YScreen和ZScreen。

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

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

一个简化的应用程序需要SwitchNavigator，DrawerNavigator，TabBarNavigator和StackNavigator。

SwitchNavigator：

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

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

for more details

DrawerNavigator：

它用于在屏幕的左侧或右侧显示侧面板或滑动视图。因此，您可以直接将此组件传递到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} />
  }
);

TabBarNavigator：

默认情况下，它用于在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：

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

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

您可以阅读Spencer Carli's blog on medium，其中包含代码说明。

请让我知道它是否满足您的需求。

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

1 个答案:

SwitchNavigator：

DrawerNavigator：

TabBarNavigator：

StackNavigator：