Question

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

相邻的JSX元素必须包装在一个封闭的标记中。

这是我到目前为止所得到的：

 /* 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);

我尝试做的另一件事就是把它们放在一个单独的屏幕上。例如，我将Drawer Navigation组件放在App.JS中，然后将HomeScreen.JS中的Tab Navigation组件放入，但这导致整个应用程序变为白色。然后我去了调试器，发现它是Delta Bundler问题。我似乎无法解决这个问题。

Answer 1

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

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

如何同时渲染抽屉导航和标签导航？

1 个答案: