使用自己的组件创建底部选项卡导航

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链接

谢谢。

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