React Native-导航之间在屏幕之间移动错误

Question

我正在学习在屏幕教程之间移动。 我进入HomeScreen.js文件，在该文件中导航出现红色错误。 当我将鼠标悬停在导航上时会出现错误

[ts] Property 'navigation' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.
any

当我将鼠标悬停在“反应导航”上时，

"[ts]
Could not find a declaration file for module 'react-navigation'. 'd:/react-workspace/stack-navigator/node_modules/react-navigation/src/react-navigation.js' implicitly has an 'any' type.
  Try `npm install @types/react-navigation` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-navigation';`"

这是我的代码

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Button
} from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}


export default HomeScreen;

Answer 1

如第二条错误消息所述，您需要为react-navigation软件包安装typescript定义模块。 您可以使用npm install --save-dev @types/react-navigation做到这一点。

另外，关于第一个错误，请确保您实际上是使用createStackNavigator包装组件。 这将使您可以访问导航道具。

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

由于您使用的是打字稿，因此需要声明状态和道具的接口。 您应该使用react来查看打字稿，看起来像这样：

class HomeScreen extends React.Component<PropsInterface, StateInterfaces> ，其中PropsInterface类似于：

export interface HelloProps { navigation: <Type_From_Definition>; }

Answer 2

这个错误：

   Could not find a declaration file for module 'react-navigation'.
   Try `npm install @types/react-navigation

说您要安装react-navigation模块。

因此，只需在项目文件夹中运行以下命令即可安装它：

npm install react-navigation

要么

npm install @types/react-navigation

Answer 3

这不是解决您问题的方法，但是在改进方面，我建议您检查this.props.navigation是否未定义，因为您是直接访问this.props.navigation.navigate的，因此如果直接在访问时执行此操作，则会造成问题这是this.props.navigation未定义

为了安全起见，请添加条件检查，如下所示

 {this.props.navigation && this.props.navigation != undefined && <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Details')} />}

Answer 4

为了解决第一个错误，我使用了此博客文章的答案：

import React, { Component } from 'react'
import { NavigationScreenProp, NavigationState } from 'react-navigation';

interface NavigationParams {
  my_param: string; // You can change "string" to what you are using
}

type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

interface Props {
  navigation: Navigation;
}

class MyComponent extends Component<Props> {
  render() {
    const my_param: string = this.props.navigation.getParam('my_param', {})
    // rest of the code
  }
}

要解决第二个错误，请按照指示进行操作：

npm install --save-dev @types/react-navigation