Как передать реквизит на экраны в TabNavigator?

Question

Как передать реквизиты компонентам экрана в TabNavigator? И с этим я имею в виду FindDestinationScreen. Я хотел бы как-то иметь HO C, который оборачивает <AppContainer> и передает реквизиты на мои экраны.

Я пробовал разные решения, которые люди ответили здесь на подобные вопросы, но не могут заставить его работать. .

Вот мой код и это мое приложение. js:

import { SafeAreaView, View } from "react-native";

import { createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

import Icon from "react-native-vector-icons/Ionicons";

import FindDestinationScreen from "./src/screens/FindDestinationScreen";
import CurrentTripScreen from "./src/screens/CurrentTripScreen";

const TabNavigator = createMaterialBottomTabNavigator(
  {
    FindDestinationScreen: {
      screen: FindDestinationScreen,
      navigationOptions: {
        title: "Search",
        tabBarIcon: ({ tintColor }) => (
          <SafeAreaView>
            <Icon
              style={[{ color: tintColor }]}
              size={25}
              name={"ios-search"}
            />
          </SafeAreaView>
        )
      }
    },
    CurrentTripScreen: {
      screen: CurrentTripScreen,
      navigationOptions: {
        title: "Trip",
        tabBarIcon: ({ tintColor }) => (
          <SafeAreaView>
            <Icon style={[{ color: tintColor }]} size={25} name={"ios-train"} />
          </SafeAreaView>
        )
      }
    },
  {
    shifting: false,
    labeled: true,
    initialRouteName: "FindDestinationScreen",
    activeColor: "#ffffff",
    inactiveColor: "#000",
    barStyle: { backgroundColor: "#456990", height: 80, paddingTop: 10 }
  }
);

const AppContainer = createAppContainer(TabNavigator);

export default App = () => {
  return <AppContainer />;
};

Что я хочу, чтобы произошло : Допустим, если я напишу <AppContainer testProp="testString" />. Можно ли получить эту опору на экранах, написанных в TabNavigator? Я имею в виду, возможно ли получить доступ к реквизиту, если я напишу его другим способом?

Что я пробовал: Я пробовал приведенный выше код, а также просто реквизит в TabNavigator, вот так <FindDestionationScreen testProp="testString"> Это работает, но я не хочу писать это на каждом экране.

Answer 1

Если вы хотите использовать Context API, создать свой контекст и обернуть свой root компонент приложения / AppStack с провайдером, вы можете получить доступ ко всем состояниям на любом из ваших экранов / страниц с помощью ловушки useContext. Например;

<ImageProvider>
    <FoodProvider>
      <EventProvider>
        <AppProvider>
          <AppStack/>
        </AppProvider>
      </EventProvider>
    </FoodProvider>
  </ImageProvider>

Надеюсь, это поможет.