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

Question

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

这是我的代码：

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()

中有单个返回元素

在本机反应中：

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

反应中：

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>
  )};
};

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

How to integrate navigationBar with scrollable-tab-view

reactjs

react-native

react-navigation