Wie navigationbar mit scrollbaren-Tab-Ansicht

Question

Ich versuche, diesen Code zu integrieren, einen Bildschirm mit navigationbar und eine scrollbare Registerkarte, so etwas zu schaffen:

Hier ist mein Code:

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

Ich erhalte diesen Fehler: Adjacent JSX elements must be wrapped in an enclosing tag

Hw kann ich es bitte reparieren.

Answer 1

als Fehler sagt, müssen Sie Ihren Code einpacken. Sie müssen render()

in einzelnen wiederkehrendes Element haben in reagieren nativer:

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

in reagieren:

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

Answer 2

Sie scheint in Ihrem return zwei Tags auf dem gleichen Niveau zu haben. Wenn Sie diese Tags in ein anderes Tag einfügen, das das Problem beheben soll.

Zum Beispiel:

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