最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - How to render different pages in <TabView > in React Native Tab View Expo - Stack Overflow

programmeradmin7浏览0评论

I am creating a <tabBar /> in the React Native expo app. I have three pages as my tabs which are mentioned below.

library: "react-native-tab-view": "^4.0.5",

const tabs = [
    {
      key: "AllContestTab",
      title: "All Contest",
      component: () => <AllContestTab />,
    },
    {
      key: "MyContestTab",
      title: "My Contest",
      component: () => <MyContestTab />,
    },
    {
      key: "TeamsTab",
      title: "Teams",
      component: () => <TeamsTab />,
    },
  ];

I have used this code to render my this three pages.

const DynamicTabBar = ({ tabs }) => {
  const [index, setIndex] = useState(0);

  // Custom renderScene function using a switch case
  const renderScene = ({ route }) => {
    switch (route.key) {
      case "AllContestTab":
        return <AllContestTab />;
      case "MyContestTab":
        return <MyContestTab />;
      case "TeamsTab":
        return <TeamsTab />;
      default:
        return null;
    }
  };

  return (
    <TabView
      navigationState={{ index, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1,
            borderBottomColor: "#243642",
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "bold",
            color: "#387478",
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />
  );
};

However, using this screen, all the contents of my pages are rendered on top of each other, and when I click on other tabs, my content is not visible.

and it's looking like this:

Code for three pages:

const AllContestTab = () => {
  console.log("************ FIRST SCREEN *********");
  return (
    <View>
          <Text>First Tab</Text>
        </View>
  );
};

const MyContestTab = () => {
  console.log("************ Second SCREEN *********");
  return (
    <View>
      <Text>Second Tab</Text>
    </View>
  );
};

const TeamsTab = () => {
  console.log("************ Third SCREEN *********");
  return (
    <View>
      <Text> Third Tab</Text>
    </View>
  );
};

How can I fix this?

Thank you for your help in advance.

I am creating a <tabBar /> in the React Native expo app. I have three pages as my tabs which are mentioned below.

library: "react-native-tab-view": "^4.0.5",

const tabs = [
    {
      key: "AllContestTab",
      title: "All Contest",
      component: () => <AllContestTab />,
    },
    {
      key: "MyContestTab",
      title: "My Contest",
      component: () => <MyContestTab />,
    },
    {
      key: "TeamsTab",
      title: "Teams",
      component: () => <TeamsTab />,
    },
  ];

I have used this code to render my this three pages.

const DynamicTabBar = ({ tabs }) => {
  const [index, setIndex] = useState(0);

  // Custom renderScene function using a switch case
  const renderScene = ({ route }) => {
    switch (route.key) {
      case "AllContestTab":
        return <AllContestTab />;
      case "MyContestTab":
        return <MyContestTab />;
      case "TeamsTab":
        return <TeamsTab />;
      default:
        return null;
    }
  };

  return (
    <TabView
      navigationState={{ index, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1,
            borderBottomColor: "#243642",
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "bold",
            color: "#387478",
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />
  );
};

However, using this screen, all the contents of my pages are rendered on top of each other, and when I click on other tabs, my content is not visible.

and it's looking like this:

Code for three pages:

const AllContestTab = () => {
  console.log("************ FIRST SCREEN *********");
  return (
    <View>
          <Text>First Tab</Text>
        </View>
  );
};

const MyContestTab = () => {
  console.log("************ Second SCREEN *********");
  return (
    <View>
      <Text>Second Tab</Text>
    </View>
  );
};

const TeamsTab = () => {
  console.log("************ Third SCREEN *********");
  return (
    <View>
      <Text> Third Tab</Text>
    </View>
  );
};

How can I fix this?

Thank you for your help in advance.

Share Improve this question edited Jan 18 at 0:47 Harshil Patel asked Jan 18 at 0:41 Harshil PatelHarshil Patel 1372 silver badges5 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

The renderScene function you're using is not compatible with the TabView. It requires that renderScene return a valid React component based on the route parameter, and it expects each tab to have unique components managed correctly. Your code renders all components simultaneously, causing them to overlap.

So, get your components together

const AllContestTab = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>First Tab</Text>
  </View>
);

const MyContestTab = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Second Tab</Text>
  </View>
);

const TeamsTab = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Third Tab</Text>
  </View>
);

const initialLayout = { width: Dimensions.get("window").width };

const tabs = [
  { key: "AllContestTab", title: "All Contest" },
  { key: "MyContestTab", title: "My Contest" },
  { key: "TeamsTab", title: "Teams" },
];

Then, create your DynamicTabBar and scene map your tabs

  const renderScene = SceneMap({
    AllContestTab: AllContestTab,
    MyContestTab: MyContestTab,
    TeamsTab: TeamsTab,
  });

And use it

    <TabView
      navigationState={{ index, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1,
            borderBottomColor: "#243642",
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "bold",
            color: "#387478",
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />
发布评论

评论列表(0)

  1. 暂无评论