如何在反应本机应用程序中传递道具以反应导航答案

【问题标题】：How to pass props to react navigation in react native app如何在反应本机应用程序中传递道具以反应导航
【发布时间】：2020-06-08 20:39:37
【问题描述】：

我正在使用 HOC 使用 ApolloClient 获取我的 react 本机应用程序中每个路由的当前登录用户详细信息。

下面是我的主要组件App.tsx：

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

const client = new ApolloClient({
  cache,
  link: errorLink.concat(authLink.concat(httpLink))
});

const TabStack = createBottomTabNavigator({
  Feed: {
    screen: Feed
  },
  Upload: {
    screen: Upload
  },
  Profile: {
    screen: Profile
  }
})

const MainStack = createStackNavigator(
  {
    Home: { screen: TabStack },
    User: { screen: UserProfile },
    Comments: { screen: Comments },
    Post: { screen: Post }
  },
  {
    initialRouteName: 'Home',
    mode: 'modal',
    headerMode: 'none'
  }
)

const AppContainer = createAppContainer(MainStack);
//Here I assign HOC to AppContainer
const RootWithSession = withSession(AppContainer);
class App extends PureComponent {

  constructor(props) {
    super(props);
  }

  render() {

    return (<ApolloProvider client={client}>
      <RootWithSession/>
    </ApolloProvider>)
  }
}

export default App;

下面是 HOC withSession.tsx：

export const withSession = Component=>props=>(
  <Query query={GET_CURRENT_USER}>
    {({data,loading,refetch})=>{
      if (loading) {
        return null;
      }
      console.log(data);
      return <Component {...props} refetch={refetch}/>;
    }}
  </Query>
)

我想将refetch 函数传递给所有组件

<Component {...props} refetch={refetch}/>

如何做到这一点？非常感谢任何帮助。

【问题讨论】：

navigation.setParams({ refetch }) ...
你确定这是 react-native-navigation 吗？这看起来像反应导航
怎么了？尝试将console.log(refetch) 放入包装的组件中
@Auticcat 正在使用 react-navigation-tabs 和 react-navigation-stack
@HendEl-Sahli 我应该把这段代码放在哪个文件？

标签： react-native graphql react-apollo apollo-client

【解决方案1】：

我能够使用ScreenProps 的StackNavigator 将来自HOC withSession 组件的refetch 函数传递给所有组件，如下所示：

export const withSession = Component=>props=>(
  <Query query={GET_CURRENT_USER}>
    {({data,loading,refetch})=>{
      if (loading) {
        return null;
      }
      if(props && props.navigation){
        //props.refetch = refetch;
        console.log(props)
        //props.navigation.refetch = refetch;
        props.navigation.setParams({refetch});
      }
      return <Component screenProps={{refetch}} {...props} refetch={refetch}/>;
    }}
  </Query>
)

现在，我可以使用this.props.screenProps.refetch 获得refetch 方法

【讨论】：