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

Question

我正在使用 HOC 在我的反应本机应用程序中使用 ApolloClient.

获取有关每个路由的当前用户登录详细信息

下面是我的主要成分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}/>

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

Answer 1

我能够使用 StackNavigator 的 ScreenProps 将 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 方法

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

How to pass props to react navigation in react native app

react-native

graphql

react-apollo

apollo-client