Typescript 为reactnavigationprops添加强类型

发布于02月19日

我在react-native 项目(expo)中使用typescript.

该项目使用react-navigation ，因此在我的屏幕上，我可以设置navigationOptions，并且可以使用props navigation.

现在，我正在try 强类型输入这些属性，以便获得可设置哪些属性的提示.

interface NavStateParams {
    someValue: string
}

interface Props extends NavigationScreenProps<NavStateParams> {
   color: string
}

class Screen extends React.Component<Props, any> {
    // This works fine
    static navigationOptions: NavigationStackScreenOptions = {
        title: 'ScreenTitle'
    }
    // Does not work
    static navigationOptions: NavigationStackScreenOptions = ({navigation, screenProps }) => ({
        title: navigation.state.params.someValue
    })
}

将react-navigation 作为组件props 的最佳方式是什么.

推荐答案

只需将NavigationType添加到props 中，如下所示:

    import { StackNavigator, NavigationScreenProp } from 'react-navigation';

    export interface HomeScreenProps {
      navigation: NavigationScreenProp<any,any>
    };

    export class HomeScreen extends React.Component<HomeScreenProps, object> {

      render() {
        return (
          <View style={styles.container}>       
            <Button
              title="Go to Details"
              onPress={() => this.props.navigation.navigate('Details')}
            />
          </View>
        );
      }
    }