Как передать реквизит, чтобы реагировать навигацию в реагировать родное приложение - PullRequest
Новая
       47

Как передать реквизит, чтобы реагировать навигацию в реагировать родное приложение

0 голосов
/ 25 февраля 2020

Я использую HO C, чтобы получить текущие данные пользователя при входе в систему для каждого маршрута в моем собственном приложении реакции с использованием 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;

Ниже HO C 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}/>

Как это сделать? Любая помощь очень ценится.

1 Ответ

0 голосов
/ 06 марта 2020

Я смог передать функцию refetch всем Компонентам из компонента HO C withSession, используя ScreenProps из StackNavigator, как показано ниже: 

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>
)

Теперь я могу метод get refetch с использованием this.props.screenProps.refetch

...