Question

如何将道具传递到TabNavigator中的屏幕组件？我所说的是FindDestinationScreen。我想以某种方式将<AppContainer>包裹起来并将道具传递到我的屏幕的HOC。

我尝试了不同的解决方案，人们已经在这里回答了类似的问题，但是无法使其正常工作。

这是我的代码，这是我的app.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，创建上下文并使用提供程序包装根应用程序组件/ AppStack，则可以使用useContext挂钩访问任何屏幕/页面中的所有状态。例如；

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

希望有帮助。

如何将道具传递到TabNavigator中的屏幕？

1 个答案: