反応するネイティブナビゲーションcant別のページにナビゲート

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

あなたはconnect方法のmapDispatchToProps対象にnavigationメソッドを渡す必要があり、ナビゲーションであなたの家のコンポーネントを接続していませんでした。ここで

は一例です：

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)