如何将值从bottomNavigatorStack传递到所有其他屏幕?

时间:2020-04-21 13:00:56

标签: react-native react-navigation-bottom-tab

我有一个 companyId ,并且我想将此 companyId 值通过bottomTabNavigation传递给所有其他屏幕。 bottomtabStack.jsx页面包含bottomTabNavigation,其中所有SalaryBreakUps,EmployeeList,Attendance,CostSheet都将重定向到受尊重的页面。在bottomtabStack.jsx中,我能够获取companyId,但我想将其传递给costSheet.jsx。 如何获得这些值?

这是我的bottomtabStack.jsx

import * as React from 'react';
import { Icon } from 'native-base';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import SalaryBreakUps from './SalaryBreakUps';
import EmployeeList from './EmployeeList';
import Attendance from './Attendance';
import CostSheet from './CostSheet';

const Tab = createBottomTabNavigator();

function MyTabs() {
    return (
        <Tab.Navigator>
            <Tab.Screen 
                name="Salary Break Ups"
                component={SalaryBreakUps}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <Icon name="flash" color={tintColor} size={25} />
                    )
                }} />
            <Tab.Screen
                name="Employee List"
                component={EmployeeList}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <Icon name="list-box" color={tintColor} size={25} />
                    )
                }} />
            <Tab.Screen 
                name="Attendance"
                component={Attendance}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <Icon name="stats" color={tintColor} size={25} />
                    )
                }} />
            <Tab.Screen
                name="Cost Sheet"
                component={CostSheet}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <Icon name="logo-twitch" color={tintColor} size={25} />
                    )
                }} />
        </Tab.Navigator >
    );
}


export default (props) => {
    console.log("company details props.", props);
    alert(props.route.params.companyId + "  is the company ID selected")
    const companyId = props.route.params.companyId
    return (
        <MyTabs companyId={companyId} />
    );
}

这是CostSheet.jsx

import React from 'react';
import { Center } from '../../Components/Center';
import {CardDetails} from './CardViewDetails';

export default (props) => {
    console.log("Cost SHeet props", props);
    return (
        <Center>
            <CardDetails/>
        </Center>
    )
}

因此,我需要CostSheet.jsx中的companyId ...如何实现此目标。

0 个答案:

没有答案