react-native-navigation無法導航到另一個頁面

Question

我搜索並將其與適當的解決方案進行比較沒有看起來錯誤，但我幾乎得到如下所示的錯誤屏幕;

請告訴我錯在這裏航行的代碼;

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import About from './app/components/About'; 

export default class Home extends Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    navigateToAbout(){ 
    const { navigate } = this.props.navigation; 
    navigate('About') 
    } 

    render() { 

    return (
     <View style={styles.container}> 
     <TouchableOpacity onPress={()=>this.navigateToAbout()}> 
      <Text>Go to About Page</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 
const SimpleApp = StackNavigator({ 
    Home: { screen: Home }, 
    About: { screen: About }, 
}); 

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

Answer 1

我覺得你的代碼是正確的，除非你有綁定的方法（通常我用一個箭頭的功能，但如果你想方法綁定在你的構造它的確定），也許你可以嘗試這樣的方式：

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import About from './app/components/About'; 

export default class Home extends Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    } 

    navigateToAbout =() => { 
    this.props.navigation.navigate('About'); 
    } 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View style={styles.container}> 
     <TouchableOpacity onPress={ this._navigateToAbout } 
      <Text>Go to About Page</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 
const SimpleApp = StackNavigator({ 
    Home: { screen: Home }, 
    About: { screen: About }, 
}); 

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

我希望它可以幫助你:)

Answer 2

你沒帶導航連接您的家庭成分，你應該通過navigation方法connect方法mapDispatchToProps對象。

下面是一個例子：

import { connect } from 'react-redux' 
import { NavigationActions } from 'react-navigation' 

const navigate = NavigationActions.navigate 

export class Home extends Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: 'Welcome', 
    }) 
    static propTypes = { 
    navigate: T.func.isRequired, 
    } 

    navigateToAbout(){ 
    const { navigate } = this.props.navigation; 
    navigate({ routeName: 'About' }) 
    } 

    render() { 

    return (
     <View style={styles.container}> 
     <TouchableOpacity onPress={()=>this.navigateToAbout()}> 
      <Text>Go to About Page</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

export default connect(null, { navigate })(Home)