reactjs - 使用钩子(Hook)在功能组件中 react 导航头

我试图将自定义标头注入使用Hooks的React功能组件。

因此，例如，我有以下带有一些钩子的React功能组件：

function StoryHome(props) {
  const [communityObj, setCommunityObj] = useState({
    uid: null,
    name: null,
  });
...
}

StoryHome.navigationOptions = {
  title: 'Stories',
  headerTitleStyle: {
    textAlign: 'left',
    fontFamily: 'OpenSans-Regular',
    fontSize: 24,
  },
  headerTintColor: 'rgba(255,255,255,0.8)',
  headerBackground: (
    <LinearGradient
      colors={['#4cbdd7', '#3378C3']}
      start={{ x: 0, y: 1 }}
      end={{ x: 1, y: 1 }}
      style={{ flex: 1 }}
    />
  ),
  headerRightContainerStyle: {
    paddingRight: 10,
  },
  headerRight: (
    <TouchableOpacity onPress={navigation.navigate('storiesList')}>
      <Ionicons
         name="ios-search-outline"
         size={25}
         color="white"
         left={20}
       />
    </TouchableOpacity>
  )
};

export default StoryHome;

因此，除了TouchableOpacity部分之外，这类工作都是如此。

首先，我无法正确显示Ionicon，其次，我无法访问功能组件外部的navigation对象。

我很乐意继续使用Hooks，但似乎无法弄清楚这一点。

最佳答案

navigationOptions可以是一个函数，该函数将对象作为参数，而navigation作为属性。

您还需要确保为onPress提供函数，并且不要直接调用navigation.navigate。

StoryHome.navigationOptions = ({ navigation }) => ({
  title: "Stories",
  headerTitleStyle: {
    textAlign: "left",
    fontFamily: "OpenSans-Regular",
    fontSize: 24
  },
  headerTintColor: "rgba(255,255,255,0.8)",
  headerBackground: (
    <LinearGradient
      colors={["#4cbdd7", "#3378C3"]}
      start={{ x: 0, y: 1 }}
      end={{ x: 1, y: 1 }}
      style={{ flex: 1 }}
    />
  ),
  headerRightContainerStyle: {
    paddingRight: 10
  },
  headerRight: (
    <TouchableOpacity onPress={() => navigation.navigate("storiesList")}>
      <Ionicons name="ios-search" size={25} color="white" left={20} />
    </TouchableOpacity>
  )
});