Question

React Native-在导航中在屏幕之间移动时出现错误

2018-08-27

2554

reactjs react-native

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

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

当我将鼠标悬停在“react-navigation”上时，我收到

"[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
  },
});

由于您使用的是 typescript，因此您需要声明状态和道具的接口。您应该使用 react 研究 typescript，它看起来像：

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