Question

在我的React Native编写的TypeScript中，我使用ReactNavigation。在我按如下方式使用类组件之前

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

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

借助钩子支持，我将HomeScreen迁移到如下所示的功能组件

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

问题是我错过了static navigationOptions: any属性/方法，并在[VS Code]中出错了

类型'（props：Props）=>元素'上不存在'navigationOptions'

函数组件中是否有任何方法具有静态属性/方法？还是有任何解决方法？

Answer 1

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

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

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

Answer 2

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

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'
})

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

2 个答案: