未定义不是一个对象（评估this.props.navigation.navigate）

Question

我想第一次了解本机的反应。我试图引进一个stacknavigator但行const {navigate} = this.props.navigation;导致错误：

undefined is not an object (evaluating 'this.props.navigation.navigate')

这里是我的代码：

import React, { Component } from "react"; 
import { StackNavigator } from "react-navigation"; 
import { AppRegistry, Text, View } from "react-native"; 

export default class App extends Component { 
    static navigationOptions = { 
    title: "Login", 
    headerStyle: { 
     backgroundColor: "#000000" 
    }, 
    headerTitleStyle: { 
     color: "#fff" 
    } 
    }; 

    constructor(props) { 
    super(props); 
    } 
    render() { 
    console.log(this.props); 

    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello</Text> 
     </View> 
    ); 
    } 
} 

const myscreens = StackNavigator({ 
    Home: { screen: App } 
}); 
AppRegistry.registerComponent("app",() => myscreens); 

什么我做错了，我该如何解决这个问题？

我还应该提到道具在渲染函数和构造函数中是空的。

，这里是我的package.json柜面它的事项

{ 
    "name": "myapp", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
    "start": "node node_modules/react-native/local-cli/cli.js start", 
    "test": "jest" 
    }, 
    "dependencies": { 
    "react": "16.0.0-alpha.12", 
    "react-native": "0.48.3", 
    "react-navigation": "git+https://github.com/react-community/react-navigation.git" 
    }, 
    "devDependencies": { 
    "babel-jest": "21.0.2", 
    "babel-preset-react-native": "4.0.0", 
    "jest": "21.1.0", 
    "react-test-renderer": "16.0.0-alpha.12" 
    }, 
    "jest": { 
    "preset": "react-native" 
    } 
} 

这是我的index.android.js

import React, { Component } from 'react'; 
import App from './components/app'; 
import { 
    AppRegistry, 
    View 
} from 'react-native'; 

export default class myapp extends Component { 
    render() { 
    return (
     <App /> 
    ); 
    } 
} 


AppRegistry.registerComponent('myapp',() => myapp); 

Answer 1

两个错误：

1. 你不应该像这样两次拨打AppRegistry。你可以从你的app.js文件中删除它。

2. 您误解了react-navigation的路由器是如何工作的。 StackNavigator（以及选项卡和抽屉）是需要直接渲染的组件（例如，您传递给AppRegistry [A]）或在应用程序中的某个点[B]。

因此，要解决这个问题，你要导出myscreens而不是App。为了说明这两种方法可以做到这一点：

A.你可以看到这个in the docs的例子，但因为你打破了你的代码为两个文件，这是它会是什么样子：

。 /components/app.js

import React, { Component } from 'react'; 
import { StackNavigator } from 'react-navigation'; 
import { Text, View } from 'react-native'; 

class App extends Component { 
    static navigationOptions = { 
    title: 'Login', 
    headerStyle: { 
     backgroundColor: '#000000', 
    }, 
    headerTitleStyle: { 
     color: '#fff', 
    }, 
    }; 

    constructor(props) { 
    super(props); 
    } 
    render() { 
    console.log(this.props); 

    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello</Text> 
     </View> 
    ); 
    } 
} 

const myscreens = StackNavigator({ 
    Home: { screen: App }, 
}); 

export default myscreens; 

index.android.js

import { AppRegistry } from 'react-native'; 
import myscreens from './components/app'; 

AppRegistry.registerComponent('myapp',() => myscreens); 

B.您将在另一个类中渲染StackNavigator，然后导出呈现它的类。这更符合你现在正在做的事情，从长远来看更灵活（例如：如果你在某个时候使用redux，你需要这样做），所以你应该这样做：

./components/app.js - 请注意套管更改为myscreens至MyScreens。这是React Native将complain about this作为lowercase JSX tags are considered to be HTML所需的。由于您没有在JSX中使用myscreens，因此直接使用AppRegistry未引发此错误。

import React, { Component } from 'react'; 
import { StackNavigator } from 'react-navigation'; 
import { Text, View } from 'react-native'; 

class App extends Component { 
    static navigationOptions = { 
    title: 'Login', 
    headerStyle: { 
     backgroundColor: '#000000', 
    }, 
    headerTitleStyle: { 
     color: '#fff', 
    }, 
    }; 

    constructor(props) { 
    super(props); 
    } 
    render() { 
    console.log(this.props); 

    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello</Text> 
     </View> 
    ); 
    } 
} 

const MyScreens = StackNavigator({ 
    Home: { screen: App }, 
}); 

export default MyScreens; 

index.android.js

import React, { Component } from 'react'; 
import { AppRegistry } from 'react-native'; 
import MyScreens from './components/app'; 

export default class myapp extends Component { 
    render() { 
    return <MyScreens />; 
    } 
} 

AppRegistry.registerComponent('myapp',() => myapp);