无法读取反应导航中未定义的属性“导航”

Question

我是React本地新手。我正在尝试将react navigation添加到我的登录页面，用户可以点击一个按钮并导航到注册页面，但我收到错误Cannot read property 'navigate' of Undefined。我已经通过互联网搜索解决方案，但没有运气。这并不能帮助我 - React Navigation - cannot read property 'navigate' of undefined和其他人一样。

这里是我的代码

index.ios.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 
import Login from './src/screens/Login'; 
import Signup from './src/screens/Signup'; 

export default class tapak extends Component { 
    constructor(props) { 
    super(props); 
    this.buttonPress = this.buttonPress.bind(this); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text> 
     </View> 
    ); 
    } 

    buttonPress() { 
    console.log('called'); 
    this.props.navigation.navigate('Signup'); 
    } 
} 

const Stacks = StackNavigator({ 
    Login: { 
     screen: Login 
    }, 
    Signup:{ 
     screen: Signup 
    } 
}); 

Answer 1

只是简单的渲染StackNavigator在index.ios。 js并将按钮移动到登录组件：

const Stacks = StackNavigator({ 
    Login: { 
     screen: Login 
    }, 
    Signup:{ 
     screen: Signup 
    } 
}); 

class tapak extends Component { 
    render() { 
    return (
     <Stacks /> 
    ); 
    } 
} 

Login.js：

export default class Login extends Component { 
    constructor(props) { 
    super(props); 
    this.buttonPress = this.buttonPress.bind(this); 
    } 

    buttonPress() { 
    console.log('called'); 
    this.props.navigation.navigate('Signup'); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text> 
     </View> 
    ); 
    } 
} 

简单的工作例如 here。

Answer 2

编写代码来index.ios.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 
import Login from './src/screens/Login'; 
import Signup from './src/screens/Signup'; 

const Stacks = StackNavigator({ 
    Login: { 
     screen: Login 
    }, 
    Signup:{ 
     screen: Signup 
    } 
}); 

Login.js

import React ,{Component} from 'react'; 
import { 
    Text, View , Button,Image, 
} from 'react-native'; 

export default class HomeScreen extends Component { 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text 
      onPress={() => navigate('Signup')} 
     > SignUp</Text> 
     </View> 
    ); 
    } 
} 

希望这对你有所帮助。

Answer 3

我认为你需要包括navigationOptions，例如：

class MyComponent extends React.Component { 
    static navigationOptions = { 
    title: 'Great', 
    // other configurations 
    } 

    render() { 
    return (
     // your view 
    ) 
    } 
} 

亦喻需要确保你使用AppRegistry.registerComponent('glfm',() => Stacks);，而不是AppRegistry.registerComponent('glfm',() => tapak);