Reactnative 使用 Hooks 在功能组件中reactnavigation 标题

我正在try 注入自定义头，以响应使用钩子的功能组件.

例如，我有以下带有一些钩子的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对象.

我很想继续使用钩子，但似乎无法解决这个问题.