Не удается вызвать реквизит элемента внутри стека навигации React.Navigator

Question

Я использую React-Navigation v5 с Redux. Мне нравится вызывать моего создателя действий logOut для запуска моей функции выхода из системы из моего headerRight.

Однако я могу получить доступ к logOut только из элемента Home, а не из HomeStack.

У меня есть одна идея это также обернуть мой HomeStack с подключением. Я еще не пробовал это знать, может ли это работать или нет. Даже если это сработает, это не мое предпочтительное решение, потому что я чувствую, что он делает мой код очень многословным

У кого-нибудь есть решение о том, как получить доступ к моей функции logOut из моего HomeStack? Заранее спасибо

    const Home = props => {
  const { loading, error, data, subscribeToMore } = useQuery(FIND_BOOKS_QUERY);
  console.log("home props", props);

  return (
    <View>
      <Text> Welcome {props.user && props.user.name} </Text>
      {loading && <Text>Loading...</Text>}
      {error && <Text>Error: {error.message}</Text>}
      {data &&
        data.findBooks.map((x, index) => {
          return (
            <View key={index}>
              <Text>
                {x.title} - {x.author}
              </Text>
            </View>
          );
        })}
    </View>
  );
};

const HomeContainer = connect(
  state => {
    // console.log("home state", state);
    return {
      user: state.auth.user
    };
  },
  { logOut }
)(Home);

export const HomeStack = props => {
  console.log("home stack props", props);
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={HomeContainer}
        options={{
          headerRight: () => {
            return (
              <TouchableOpacity
                onPress={() => {
              // props.logOut // - cannot access logOut here as HomeStack props does not have logOut
                  console.log("exit");
                }}
              >
                <Text>Exit</Text>
              </TouchableOpacity>
            );
          }
        }}
      />
    </Stack.Navigator>
  );
};

Answer 1

Упаковка моего HomeStack с подключением работает. Он может сделать доступным logOut внутри H, что позволяет мне вызывать logOut внутри headerRight.

Однако такой метод будет многословным, потому что мне нужно будет подключить H и Home к редуксу. Есть ли более элегантный способ? Спасибо

const Home = props => {
  const { loading, error, data, subscribeToMore } = useQuery(FIND_BOOKS_QUERY);
  console.log("home props", props);

  return (
    <View>
      <Text> Welcome {props.user && props.user.name} </Text>
      {loading && <Text>Loading...</Text>}
      {error && <Text>Error: {error.message}</Text>}
      {data &&
        data.findBooks.map((x, index) => {
          return (
            <View key={index}>
              <Text>
                {x.title} - {x.author}
              </Text>
            </View>
          );
        })}
    </View>
  );
};

const HomeContainer = connect(
  state => {
    // console.log("home state", state);
    return {
      user: state.auth.user
    };
  },
  { logOut }
)(Home);

export const H = props => {
  console.log("home stack props", props);
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={HomeContainer}
        options={{
          headerRight: () => {
            return (
              <TouchableOpacity
                onPress={() => {
                  props.logOut(); // now works OK
                  console.log("exit");
                }}
              >
                <Text>Exit</Text>
              </TouchableOpacity>
            );
          }
        }}
      />
    </Stack.Navigator>
  );
};

export const HomeStack = connect(
  state => {
    // console.log("home state", state);
    return {
      user: state.auth.user
    };
  },
  { logOut }
)(H);