如何在我的应用程序周围传递道具以反应原生？

Question

一直受到以下问题的困扰，不确定如何继续。 非常感谢任何帮助！

基本上，我想将道具从我的标签组件传递给我的电影细节组件。 我也在尝试为此使用异步存储。 但我不确定如何实施。 用例是我想显示一个带有按钮的电影列表，该按钮根据它是否是最喜欢的电影有条件地呈现。

我的 app.js 中有一个堆栈导航器，用作所有导航的基础。 应用程序.js

<NavigationContainer>
      <Stack.Navigator
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Tabs" component={Tabs} />
        <Stack.Screen name="MovieDetail" component={MovieDetail} />
      </Stack.Navigator>
</NavigationContainer>

标签.js

<Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        headerShown: false,
        tabBarStyle: {
          position: 'absolute',
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: '#393E41',
          borderRadius: 15,
          borderTopColor: 'transparent',
          height: 90,
          ...styles.shadow
        }
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon focused={focused} icon={HomeIcon} label={'Home'} />
          )
        }}
      />
      <Tab.Screen
        name="About"
        component={AboutScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon focused={focused} icon={AboutIcon} label={'About'} />
          )
        }}
      />
      <Tab.Screen
        name="Favourites"
        component={FavouritesScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon focused={focused} icon={FavouritesIcon} label={'Favourites'} />
          )
        }}
      />
    </Tab.Navigator>

HomeScreen.js

<SafeAreaView style={styles.container}>
      <StatusBar hidden />
      <Text style={styles.title}>database.io</Text>
      <ScrollView>
        <MovieList
          movies={movies}
          setMovies={setMovies}
          title={'Top 20'}
          navigation={props.navigation}
        />
      </ScrollView>
</SafeAreaView>

有没有办法做到这一点？ 我曾尝试使用 initialParams 传递道具，但它不会持续存在。

我在想类似以下的事情：我将 favouriteList state 从 App 传递到 Tabs，然后从 Tabs 传递到其各个屏幕。 应用程序.js

<NavigationContainer>
      <Stack.Navigator
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Tabs" component={Tabs} favouriteList={favouriteList}/>
        <Stack.Screen name="MovieDetail" component={MovieDetail} />
      </Stack.Navigator>
</NavigationContainer>

然后在 Tabs.js

<Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        headerShown: false,
        tabBarStyle: {
          position: 'absolute',
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: '#393E41',
          borderRadius: 15,
          borderTopColor: 'transparent',
          height: 90,
          ...styles.shadow
        }
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        favouriteList={props.favouriteList}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon focused={focused} icon={HomeIcon} label={'Home'} />
          )
        }}
      />
      <Tab.Screen
        name="About"
        component={AboutScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon focused={focused} icon={AboutIcon} label={'About'} />
          )
        }}
      />
      <Tab.Screen
        name="Favourites"
        component={FavouritesScreen}
        favouriteList={props.favouriteList}
        options={{
          tabBarIcon: ({ focused }) => (
            <TabIcon focused={focused} icon={FavouritesIcon} label={'Favourites'} />
          )
        }}
      />
    </Tab.Navigator>

Answer 1

您的应用程序需要一个全局 state。 这将是一种更好的道具钻孔方法。 它可以使用 React 的context API 本地实现，或者您可以使用任何 state 管理库（redux、mobx 等）

• 反应上下文 API
• Redux

总体思路是拥有可以从应用程序组件树中的任何位置使用的单一数据源。

但是，如果你想使用 props 将数据传递给每个页面，你可以这样做：

navigation.navigate("Screen", payload); // payload is the data you want to pass to Screen

要使用数据，您可以执行以下操作：

const payload = route.params;

这种方法的演示在这里： 数据传递， 数据消费