I'm developing an app which requires a complex homepage, in it I need to render some tab navigators (

Any help would be appreciated Thanks

CodePudding user response：

Here is one solution. Need to use

import * as React from 'react';
import {View, useWindowDimensions, Text} from 'react-native';
import {TabView, SceneMap} from 'react-native-tab-view';

// Scenes
const FirstRoute = () => <View style={{flex: 1, backgroundColor: 'red'}} />;

const SecondRoute = () => <View style={{flex: 1, backgroundColor: 'blue'}} />;

const ThirdRoute = () => <View style={{flex: 1, backgroundColor: 'yellow'}} />;

const FourthRoute = () => <View style={{flex: 1, backgroundColor: 'green'}} />;

// Tab Views
const FirstTabView = () => {
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'First'},
    {key: 'second', title: 'Second'},
  ]);
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{width: layout.width}}
    />
  );
};

const SecondTabView = () => {
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'third', title: 'Third'},
    {key: 'fourth', title: 'Fourth'},
  ]);
  const renderScene = SceneMap({
    third: ThirdRoute,
    fourth: FourthRoute,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{width: layout.width}}
    />
  );
};

export default function TabViewExample() {
  return (
    <>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Header</Text>
      </View>
      <FirstTabView />
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Other Content</Text>
      </View>
      <SecondTabView />
    </>
  );
}