为反应导航道具添加强类型

Question

我在我的 react-native 项目（expo）中使用打字稿。

该项目使用反应导航，所以在我的屏幕上我可以设置 navigationOptions 并且我可以访问道具 navigation 。

现在我正在尝试强烈键入这些内容，以便获得有关可设置哪些属性的提示。

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

将反应导航作为组件的道具处理的最佳方法是什么。

原文由 Mellet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将 NavigationType 添加到您的道具中，如下所示：

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

原文由 Andrej Kyselica 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有同样的问题，这是我的解决方案：

 import * as React from 'react'
import { NavigationScreenProps, NavigationStackScreenOptions } from 'react-navigation'

interface NavStateParams {
  someValue: string
}

// tslint:disable-next-line:no-any
type NavigationOptionsFn<TParams=any> = (props: NavigationScreenProps<TParams>) => NavigationStackScreenOptions

class Screen extends React.Component {
  // This should works fine
  static navigationOptions: NavigationOptionsFn<NavStateParams> = ({ navigation, screenProps }) => ({
    title: navigation.state.params.someValue
  })
}

您可能需要声明 NavigationOptionsFn<TParams> 键入一些 d.ts 文件以使其在全球范围内工作。

原文由 Adiono 发布，翻译遵循 CC BY-SA 3.0 许可协议