无法在React Navigation Stack.Navigator中调用元素道具

Question

我正在将Redux使用React-Navigation v5。我想打电话给我的注销动作创建者，以从headerRight触发注销功能。

但是，我只能从Home元素内部而不是HomeStack内部访问logOut。

我的一个想法是也用连接包装我的HomeStack。我还没有尝试过知道它是否可以工作。即使它可以工作，这也不是我的首选解决方案，因为我认为这使我的代码非常冗长

任何人都有关于如何从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。它能够使H内的logOut可用，这使我可以在headerRight内部调用logOut。

但是，这种方法很冗长，因为我需要将H和Home都连接到redux。有没有更优雅的方式？谢谢

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