如何使用 React Native 打开屏幕

Question

我基于 RNE（React 本机元素演示应用程序）创建了一个包含三个选项卡的选项卡式视图。我不得不从中间选项卡禁用 drawernavigator，因为单击抽屉中的 link 然后再次单击抽屉返回中间选项卡视图不起作用，因为它会崩溃。从左侧和右侧选项卡可以正常工作，我不明白为什么会这样。我只是想打开一个视图，但由于我使用的是反应导航，所以它不起作用。我使用了一个花哨的 DrawerNavigator，一个很酷的 TabNavigator 和一个漂亮的 StackNavigator 而不是保持简单，我尝试从 DrawerNavigator 导航到 TabNavigator 时收到错误消息。

App.js

/**
 * React Native App
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View, Image, Dimensions, AppRegistry
} from 'react-native';

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


import Components from './src/drawer/components';
import Ratings from './src/drawer/ratings';
import Pricing from './src/drawer/pricing';
import Login from './src/drawer/login';
import Profile from './src/drawer/profile';
import Lists from './src/drawer/lists';

const SCREEN_WIDTH = Dimensions.get('window').width;

const CustomDrawerContentComponent = props => {

    return(
    <View style={{ flex: 1, backgroundColor: '#43484d' }}>
        <View
            style={{ marginTop: 40, justifyContent: 'center', alignItems: 'center' }}
        >
            <Image
                source={require('./src/images/logo.png')}
                style={{ width: SCREEN_WIDTH * 0.57 }}
                resizeMode="contain"
            />
        </View>
        <View style={{marginLeft: 10}}>
            <DrawerItems {...props} />
        </View>
    </View>
)};

const MainRoot = DrawerNavigator(
    {
        Login: {
            path: '/login',
            screen: Login
        },
        Profile: {
             path: '/profile',
             screen: Profile
         },
      /*  Lists: {
             path: '/lists',
             screen: Lists
         },*/
        Components: {
            path: '/components',
            screen: Components,
        },
    /*    Ratings: {
            path: '/ratings',
            screen: Ratings,
        },*/
        Pricing: {
            path: '/pricing',
            screen: Pricing,
        }
    },
    {
        initialRouteName: 'Components',
        contentOptions: {
            activeTintColor: '#548ff7',
            activeBackgroundColor: 'transparent',
            inactiveTintColor: '#ffffff',
            inactiveBackgroundColor: 'transparent',
            labelStyle: {
                fontSize: 15,
                marginLeft: 0,
            },
        },
        drawerWidth: SCREEN_WIDTH * 0.8,
        contentComponent: CustomDrawerContentComponent,

        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
    }
);
export default MainRoot;

我的抽屉导航器。

/**
 * React Native App
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View, Image, Dimensions, AppRegistry
} from 'react-native';

import { DrawerNavigator, DrawerItems } from 'react-navigation';


import Components from './src/drawer/components';
import Ratings from './src/drawer/ratings';
import Pricing from './src/drawer/pricing';
import Login from './src/drawer/login';
import Profile from './src/drawer/profile';
import Lists from './src/drawer/lists';

const SCREEN_WIDTH = Dimensions.get('window').width;

const CustomDrawerContentComponent = props => (
    <View style={{ flex: 1, backgroundColor: '#43484d' }}>
        <View
            style={{ marginTop: 40, justifyContent: 'center', alignItems: 'center' }}
        >
            <Image
                source={require('./src/images/logo.png')}
                style={{ width: SCREEN_WIDTH * 0.57 }}
                resizeMode="contain"
            />
        </View>
        <View style={{marginLeft: 10}}>
            <DrawerItems {...props} />
        </View>
    </View>
);
const CustomDrawerContentComponent2 = (props) => {
    const nav = props.nav;

    return (<View>
        <ScrollView>
            <DrawerItems
                {...props}
                onItemPress = {
                    ({ route, focused }) =>
                    {
                        props.onItemPress({ route, focused })
                        console.log("item pressed");
                    }
                }
            />
        </ScrollView>
    </View>)
};
const MainRoot = DrawerNavigator(
    {
        Login: {
            path: '/login',
            screen: Login
        },
        Profile: {
             path: '/profile',
             screen: Profile
         },
        Lists: {
             path: '/lists',
             screen: Lists
         },
        Components: {
            path: '/components',
            screen: Components,
        },
    /*    Ratings: {
            path: '/ratings',
            screen: Ratings,
        },*/
        Pricing: {
            path: '/pricing',
            screen: Pricing,
        }
    },
    {
        initialRouteName: 'Components',
        contentOptions: {
            activeTintColor: '#548ff7',
            activeBackgroundColor: 'transparent',
            inactiveTintColor: '#ffffff',
            inactiveBackgroundColor: 'transparent',
            labelStyle: {
                fontSize: 15,
                marginLeft: 0,
            },
        },
        drawerWidth: SCREEN_WIDTH * 0.8,
        contentComponent: CustomDrawerContentComponent,

        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
    }
);
export default MainRoot;

我的标签导航器。

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import ButtonsTab from '../tabs/buttons';
import ListsTab from '../tabs/lists';
import InputTab from '../tabs/input';
import FontsTab from '../tabs/fonts';
import DetailedTrends from '../views/lists_home'
const Components = TabNavigator(
  {
    ButtonsTab: {
      screen: ButtonsTab,
      path: '/buttons',
      navigationOptions: {
        tabBarLabel: 'Add',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'camera' : 'camera'}
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
      },
    },
    ListsTab: {
      screen: ListsTab,
      path: '/lists',
      navigationOptions: {
        tabBarLabel: 'Ads',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon name="list" size={30} type="entypo" color={tintColor} />
        ),
      },
    },

   /* FontsTab: {
      screen: FontsTab,
      path: '/fonts',
      navigationOptions: {
        tabBarLabel: 'On map',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'map-marker-outline' : 'map-marker-outline'}
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
      },
    },*/
      InputTab: {
          screen: InputTab,
          path: '/input',
          navigationOptions: {
              tabBarLabel: 'My activity',
              tabBarIcon: ({ tintColor, focused }) => (
                  <Icon
                      name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
                      size={30}
                      type="material-community"
                      color={tintColor}
                  />
              ),
          },
      },
  },
  {
    initialRouteName: 'ListsTab',
    animationEnabled: false,
    swipeEnabled: true,
    // Android's default option displays tabBars on top, but iOS is bottom
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: '#e91e63',
      // Android's default showing of icons is false whereas iOS is true
      showIcon: true,
    },
  }
);

Components.navigationOptions = {
  drawerLabel: 'Components',
  drawerIcon: ({ tintColor }) => (
    <Icon
      name="settings"
      size={30}
      iconStyle={{
        width: 30,
        height: 30
      }}
      type="material"
      color={tintColor}
    />
  ),
};

export default Components;

如果我现在在抽屉导航器中按 "Components" 导航到组件视图，我的应用程序会崩溃。

"There is no route defined for key ButtonsTab."

这个错误的目的是什么？

我该如何解决这个问题？为什么它抱怨 ButtonsTab？

Error: There is no route defined for key ButtonsTab.
Must be one of: 'Home','Lists_Detail'

This error is located at:
    in DrawerView (at DrawerNavigator.js:88)
    in Unknown (at createNavigator.js:13)
    in Navigator (at createNavigationContainer.js:226)
    in NavigationContainer (at renderApplication.js:35)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
getScreenForRouteName

如果我向 lists.js 添加导航器，它几乎可以工作，但仍然难以理解、不必要和错误。他们为什么要制作一个您无法在屏幕之间导航的框架？

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import ListsHome from '../views/lists_home';
import ListsDetails from '../views/lists_detail';
import ButtonsTab from '../tabs/buttons';

const ListsTabView = ({ navigation }) => (
  <ListsHome banner="Lists" navigation={navigation} />
);

const ListsDetailTabView = ({ navigation }) => (
  <ListsDetails banner="Lists Detail" navigation={navigation} />
);

const ListsTab = StackNavigator({
  Home: {
    screen: ListsTabView,
    path: '/',
    navigationOptions: ({ navigation }) => ({
      title: 'Lists',
      headerLeft: (
        <Icon
          name="menu"
          size={30}
          type="entypo"
          style={{ paddingLeft: 10 }}
          onPress={() => navigation.navigate('DrawerOpen')}
        />
      ),
    }),
  },
  Lists_Detail: {
    screen: ListsDetailTabView,
    path: 'lists_detail',
    navigationOptions: {
      title: 'Lists Detail',
    },
  },  ButtonsTab: {
        screen: ListsTabView,
        path: '/',
        navigationOptions: ({ navigation }) => ({
            title: 'Lists',
            headerLeft: (
                <Icon
                    name="menu"
                    size={30}
                    type="entypo"
                    style={{ paddingLeft: 10 }}
                    onPress={() => navigation.navigate('DrawerOpen')}
                />
            ),
        }),
    },

});

export default ListsTab;

Answer 1

您可以使用我制作的这个示例项目来演示 StackNavigator、TabNavigator 和 DrawerNavigator 一起工作。

github.com/paraswatts/DrawerNavigatorReactNative

希望对您有所帮助。

如何使用 React Native 打开屏幕

How to open a screen with React Native

react-native

react-navigation