Reactjs 反应本机-在屏幕之间移动导航错误

我正在学习屏幕间移动教程。我找到HomeScreen.js文件，在那里我在导航时出现红色错误。当我在导航上悬停时，我得到一个错误

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

这是我的密码

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;

import React，{Component}来自'React'；
进口{
看法
文本，
样式表，
按钮
}从“反应本机”；
从“反应导航”导入{createStackNavigator}；
类主屏幕扩展了React.Component{
render（）{
返回(
主屏幕
this.props.navigation.navigate（'Details'）}
/>
);
}
}
导出默认主屏幕；

正如第二条错误消息所说，您需要为react导航包安装typescript定义模块。您可以通过

npm安装--save dev@types/react-navigation

实现这一点

另外，关于第一个错误，请确保您实际使用

createStackNavigator

包装组件。这将允许您访问导航道具

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

因为您使用的是typescript，所以需要声明状态和道具的接口。您应该使用react查看typescript，它看起来像：

类主屏幕扩展React.Component

，其中

PropsInterface

类似于：

---

导出接口HelloProps{navigation:；}

这不是您问题的解决方案，但就改进而言，我建议您检查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')} />}

{this.props.navigation&&this.props.navigation！=未定义&&this.props.navigation.navigate（'Details'）}/>

此错误：

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

让您安装react导航模块

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

npm install react-navigation

或

---

为了解决第一个错误，我使用下面的答案：

---

我们无法神奇地猜出你犯了什么错误。您能发布您收到的错误吗？[ts]属性“导航”在类型“只读和只读”上不存在。总之，我已经更新了答案，为你的道具声明了一个界面，并弄清楚你需要什么类型的导航。你的Index.js或App.js代码是什么？因为主屏幕必须在StackNavigator中使用。您是否在家长的某个组件中创建StackNavigator？@SS抱歉，不是您，而是其他人在没有正当理由的情况下这样做。盲目投票没有意义

npm install react-navigation

npm install @types/react-navigation

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