Question

大家好
我创建了一个底部标签导航页面，只是使用名称，而不是任何组件，但可以正常工作（每页没有任何数据），
现在我想使用自己的组件声明来创建它，该怎么办？


import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const BottomTab = createBottomTabNavigator();

const BottomNavigation = ({length,obj}) => {
    let screens = [];
    for(let i = 0 ; i < length ; i++){
        screens.push(<BottomTab.Screen name={obj.names[i]} component={obj.components[i]} />);
    }
    return (
        <BottomTab.Navigator>
            {screens}
        </BottomTab.Navigator>
    );
};

export default function App(){
  let state = {
    names: ['One','Two','Three'],
    components: []
  };
  state.names.map((n)=>{
    return state.components.push(eval('n'));
  });
  return (
    <NavigationContainer>
      <BottomNavigation length={state.names.length} obj={state} />
    </NavigationContainer>
  );
}

CodeSnadBox Link

谢谢。

Answer 1

import * as React from "react";
import { Text, View, TextInput } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const BottomTab = createBottomTabNavigator();

const BottomNavigation = ({ names, JSXsfuncs }) => {
  let state = {
    st: ""
  };
  const screens = names.map((link, index) => (
    <BottomTab.Screen name={link} children={JSXsfuncs[index]} />
  ));
  return <BottomTab.Navigator>{screens}</BottomTab.Navigator>;
};

export default function App() {
  let state = {
    names: ["One", "Two", "Three"],
    JSXs: []
  };
  state.names.map((n) => {
    return state.JSXs.push(() => (
      <View>
        <Text>{n}</Text>
        <TextInput style={{ borderWidth: 1, padding: "0.75%", fontSize: 21 }} />
      </View>
    ));
  });
  return (
    <NavigationContainer>
      <BottomNavigation names={state.names} JSXsfuncs={state.JSXs} />
    </NavigationContainer>
  );
}

使用自己的组件创建底部标签导航

1 个答案: