Creating bottom tab navigation with own components

Question

hello everyone,
I created a bottom tab navigation page just with names, Not any component decleration but work correctly (without any data per page),
now I want to create that with own components declaration, how do I do?


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

Thank.

score 0 · Answer 1 · answered Aug 23 '20 at 17:16

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

Creating bottom tab navigation with own components

1 Answers1