如何将导航栏与可滚动选项卡视图集成答案

【问题标题】：How to integrate navigationBar with scrollable-tab-view如何将导航栏与可滚动选项卡视图集成
【发布时间】：2017-07-20 12:04:42
【问题描述】：

我正在尝试使用此代码创建一个带有导航栏和可滚动选项卡的屏幕，如下所示：

这是我的代码：

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

请问我可以修复它。

【问题讨论】：

“相邻的 JSX 元素必须被包裹在一个封闭的标签中”，也许用 div 把你的回报括起来？您不能在渲染中返回多个 JSX 元素（您可以使用一个 navigationBar 和一个 ScrallableTabView 来实现）。
由于这是 react-native，您需要将 NavigationBar 和 ScrollableTabView 包装在 View 组件中。

标签： reactjs react-native react-navigation

【解决方案1】：

正如错误所说，您需要包装您的代码。 render()中必须有单个返回元素

在本机反应中：

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

在反应中：

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

【讨论】：

【解决方案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>
  )};
};

【讨论】：