Question

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

tf.train.SequenceExample

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

[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';`"

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

此错误：

        cv::extractChannel (for_each, cblue, 0 );
        cv::imshow("cropped_BGR",frame1);
        cv::imshow("mod_BLUE",cblue);

说您要安装react-navigation模块。

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

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

或

npm install 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

要解决第一个错误，我使用了blog post的答案：

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

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

4 个答案: