android - 如何同时渲染 Drawer Navigation 和 Tab Navigation？

Question

我正在尝试找到一种在 React Native 中使用抽屉导航和标签导航的方法。当我试图将这些组件放在一起时，出现了这个错误:

Adjacent JSX elements must be wrapped in an enclosing tag.

这是我到目前为止得到的:

 /* Imports */
import React, {Component} from 'react';
import {AppRegistry, Text, View, StyleSheet, TouchableHighlight, TouchableOpacity, YellowBox} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import { NavigationComponent } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import PropTypes from 'prop-types';

import HomeScreen from './Screens/HomeScreen';
import LoginScreen from './Screens/LoginScreen';
import RegisterScreen from './Screens/RegisterScreen';
import ProfileScreen from './Screens/ProfileScreen';
import UserListScreen from './Screens/UserListScreen';
import OtherUserScreen from './Screens/OtherUserScreen';
import OtherTagsScreen from './Screens/OtherTagsScreen';
import QuoteMachineScreen from './Screens/QuoteMachineScreen';
import SideBar from './Screens/SideBar';

/* Main */
class Home extends Component {
  constructor(props) {

   super(props);

   YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
  ]);

 }




}




export default class myapp extends Component{

    render(){
      return(
        /* Main View  */

        /* End Main View */

      <AppDrawerNavigator />
      <TabNav />

      );
    }
}
/*End Main */

/*Navs*/

 const TabNav = TabNavigator({
  HomeScreen: { screen: HomeScreen },
  LoginScreen: { screen: LoginScreen },
  RegisterScreen: { screen: RegisterScreen },
}, {
  tabBarComponent: NavigationComponent,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    bottomNavigationOptions: {
      labelColor: '#333',
      rippleColor: 'white',
      tabs: {
        HomeScreen: {
          barBackgroundColor: '#EEEEEE',
          activeLabelColor: '#212121',
        },
        LoginScreen: {
          barBackgroundColor: '#00796B'
        },
        RegisterScreen: {
          barBackgroundColor: '#EEEEEE', // like in the standalone version, this will override the already specified `labelColor` for this tab
          activeLabelColor: '#212121',
          activeIcon: <Icon size={24} color="#212121" name="newsstand" />
        }
      }
    }
  }
});

const AppDrawerNavigator = DrawerNavigator({
  LoginScreen: {screen: LoginScreen},
  RegisterScreen: {screen: RegisterScreen},
  ProfileScreen: {screen: ProfileScreen},
  UserListScreen: {screen:UserListScreen},
  HomeScreen: {screen: HomeScreen},
  OtherUserScreen: {screen: OtherUserScreen},
  OtherTagsScreen: {screen: OtherTagsScreen},
  QuoteMachineScreen: {screen: QuoteMachineScreen},
},
{
    initialRouteName: "HomeScreen",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  },

);

const AppStackNav = StackNavigator ({
  LoginScreen: {screen: LoginScreen},
  RegisterScreen: {screen: RegisterScreen},
  ProfileScreen: {screen: ProfileScreen},
  UserListScreen: {screen:UserListScreen},
  HomeScreen: {screen: HomeScreen},
  OtherUserScreen: {screen: OtherUserScreen},
  OtherTagsScreen: {screen: OtherTagsScreen},
})

/* Styles */
const styles = StyleSheet.create({
    headerText: {
    textAlign: 'center',
    fontSize: 30,
  },
    flexStyle: {
      flex: 1,
    },
    container: {
      flexDirection: 'row',
      height: 50,
    },
    v1: {
      flex: 1,
      padding: 10,
      backgroundColor: '#333',
      alignItems:'center'
    },
    v2: {
      flex: 1,
      padding: 10,
      backgroundColor: 'gold',
      alignItems:'center',
      justifyContent: 'center'
    },
    v3: {
      flex: 1,
      padding: 10,
      backgroundColor: 'gold',
      alignItems:'center'
    }
});

/* Registry */
AppRegistry.registerComponent('myapp', () => myapp);

我尝试做的另一件事是将它们放在单独的屏幕中。例如，我会将抽屉导航组件放在 App.JS 中，然后将选项卡导航组件放在 HomeScreen.JS 中，但这会导致整个应用程序变白。然后我去调试器，发现是Delta Bundler的问题。我就是想不通这个问题。

Answer 1

您可能对这个问题挖掘得太深了。错误显示为“相邻的 JSX 元素必须包含在封闭标记中。”。仔细检查 myapp 类的渲染方法。您需要返回一个单个组件，因此您应该将这两个组件包装在一个容器中。

重复问题 - Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag