無法讀取反應導航中未定義的屬性「導航」

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);