如何根據反應原生中的索引動態呈現標簽欄內容？

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

這是我的代碼，它為每個顯示相同的文本。但我不應該使用很多組件。因此，選擇選項卡時，必須顯示1個文本“這是1月份”等各個月份......

棘手的部分只有 1 個組件必須使用 12 個月...意味著您必須重用相同的組件，而不是每個月創建 12 個組件...因此該單個組件內的文本將根據 Tab 索引動態... 0 =一月，1 = 二月

uj5u.com熱心網友回復：

下面的代碼將完成你的作業，

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

注意：請洗掉行內樣式。

標籤：反应原生

上一篇：嘗試顯示FlatList時出現了太多rerednders錯誤

下一篇：正則運算式不符合預期模式