功能组件中的 React/ReactNative 静态属性

Question

在我的 React Native 编写的 TypeScript 中，我使用了 ReactNavigation。在我使用下面的类组件之前

class HomeScreen extends Component {
   static navigationOptions: any;
   ...
}

// in navigation config
HomeScreen.navigationOptions = {...}

有了 hooks 支持，我将 HomeScreen 迁移到如下功能组件

function HomeScreen(props:Props) {
  return (...)
}
HomeScreen.navigationOptions = {...} // VS Code error here

问题是我错过了static navigationOptions: anypropery/method，并得到了错误 [In VS Code]

'navigationOptions' 不存在于类型'(props: Props) => Element'

有没有办法在函数组件中拥有静态属性/方法？或者有什么解决方法？

Answer 1

对于功能组件，可以这样使用

HomeScreen.navigationOptions = screenProps => ({
    title: 'Home'
})

对于打字稿的支持

interface NavParams {
    id: number;
}
const HomeScreen: NavigationScreenComponent<NavParams> = (props: Props) => {
    return <View><Text>{props.navigation.getParam('id')}</Text></View>
}
HomeScreen.navigationOptions = screenProps => ({
    title: 'Home'
})

Answer 2

这可能有点晚了。 你的功能组件就像

export default function HomeScreen(props){
  return(..)
}
//the following is the static field from class component
HomeScreen.navigationOptions={
 title:'Home',
};

我希望这可能对某人有所帮助。