如何将navigationBar与scrollable-tab-view集成

Question

我尝试使用此代码创建一个带有navigationBar和可滚动标签的屏幕，如下所示：

这是我的代码：

import NavigationBar from 'react-native-navigation-bar';
import React, { PureComponent } from 'react';
import { View, StyleSheet , Text} from 'react-native';
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-   scrollable-tab-view';
export default class HomePage extends   PureComponent{
 render() {
return (
 <NavigationBar
 title={'this is a test'}
 height={44}
 titleColor={'#fff'}
 backgroundColor={'#149be0'}
 leftButtonTitle={'back'}
 leftButtonTitleColor={'#fff'}
 rightButtonTitle={'forward'}
 rightButtonTitleColor={'#fff'}
  />
  <ScrollableTabView
 style={{marginTop: 20, }}
 initialPage={2}
 renderTabBar={() => <ScrollableTabBar />}
 >
 <Text tabLabel='Tab #1'>My</Text>
 <Text tabLabel='Tab #2'>favorite</Text>
<Text tabLabel='Tab #3'>project</Text>
</ScrollableTabView>
)};
};

我收到此错误：Adjacent JSX elements must be wrapped in an enclosing tag

我能解决它吗？

Answer 1

正如错误所说，你需要包装你的代码。您必须在render()

中包含单个返回元素

in react native：

return (
    <View style={{flex: 1}}>
    //place your content here
    </View>
);

in react：

return (
    <div>
    //place your content here
    </div>
);

Answer 2

您return中的同一级别似乎有两个标签。如果您将这些标记包装在另一个应该解决问题的标记中。

例如：

export default class HomePage extends   PureComponent{
 render() {
   return (
     <div>
       <NavigationBar
         title={'this is a test'}
         height={44}
         titleColor={'#fff'}
         backgroundColor={'#149be0'}
         leftButtonTitle={'back'}
         leftButtonTitleColor={'#fff'}
         rightButtonTitle={'forward'}
         rightButtonTitleColor={'#fff'}
       />
      <ScrollableTabView
        style={{marginTop: 20, }}
        initialPage={2}
         renderTabBar={() => <ScrollableTabBar />}
      >
        <Text tabLabel='Tab #1'>My</Text>
        <Text tabLabel='Tab #2'>favorite</Text>
        <Text tabLabel='Tab #3'>project</Text>
      </ScrollableTabView>
    </div>
  )};
};