react-native - 如何根据索引动态呈现标签栏内容？答案

【问题标题】：How to render tab bar content dynamically based on index in react native?react-native - 如何根据索引动态呈现标签栏内容？
【发布时间】：2021-12-29 08:03:45
【问题描述】：


import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

function Jan() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function Feb() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function March() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function April() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function May() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function June() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function July() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Aug() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Sept() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Oct() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Nov() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Dec() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TopTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{tabBarScrollEnabled: true}}>
        <Tab.Screen name="Jan" component={Jan} />
        <Tab.Screen name="Feb" component={Feb} />
        <Tab.Screen name="March" component={March} />
        <Tab.Screen name="April" component={April} />
        <Tab.Screen name="May" component={May} />
        <Tab.Screen name="June" component={June} />
        <Tab.Screen name="July" component={July} />
        <Tab.Screen name="Aug" component={Aug} />
        <Tab.Screen name="Sept" component={Sept} />
        <Tab.Screen name="Oct" component={Oct} />
        <Tab.Screen name="Nov" component={Nov} />
        <Tab.Screen name="Dec" component={Dec} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

这是我的代码，每个代码都显示相同的文本。但我不应该使用很多组件。 So when a tab is selected, 1 text must display "This is the month of January" and so on for respective months...

棘手的部分只有 1 个组件必须使用 12 个月...意味着您必须重复使用相同的组件，而不是每个月创建 12 个组件...因此，单个组件内的文本将基于 Tab 索引是动态的.. . 0 = 一月，1 = 二月。

【问题讨论】：

标签： react-native

【解决方案1】：

下面的代码将完成你的工作，

import * as React from "react";
import { Text, View } from "react-native";
import { NavigationContainer, useRoute } from "@react-navigation/native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

function DynamicComponent() {
  const route = useRoute();
  const { name } = route;
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Welcome to {name}!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TopTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ tabBarScrollEnabled: true }}>
        <Tab.Screen name="Jan" component={DynamicComponent} />
        <Tab.Screen name="Feb" component={DynamicComponent} />
        <Tab.Screen name="March" component={DynamicComponent} />
        <Tab.Screen name="April" component={DynamicComponent} />
        <Tab.Screen name="May" component={DynamicComponent} />
        <Tab.Screen name="June" component={DynamicComponent} />
        <Tab.Screen name="July" component={DynamicComponent} />
        <Tab.Screen name="Aug" component={DynamicComponent} />
        <Tab.Screen name="Sept" component={DynamicComponent} />
        <Tab.Screen name="Oct" component={DynamicComponent} />
        <Tab.Screen name="Nov" component={DynamicComponent} />
        <Tab.Screen name="Dec" component={DynamicComponent} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

注意：请删除内联样式。

【讨论】：