未定義はオブジェクトではありません（評価 '_this2.props.navigation.navigate'）

Question

ヘッダーをクリックすると、次のページに移動します。しかし、クラス外のナビゲーション・プロンプトにアクセスする方法はわかりません。どのようにこれを行うにはどのような提案？

import React,{Component} from 'react' 
import { View, Text, TouchableOpacity, FlatList} from 'react-native' 

class header extends Component { 
    render(){ 
    return(
     <TouchableOpacity 
      onPress={() => **this.props.navigation.navigate('PageTwo')**} 
     > 
      <Text>{'Go to next Page Two'}</Text> 
     </TouchableOpacity> 
    ) 
    } 
} 

export default class PageOne extends Component { 
    static navigationOptions = { 
    title: 'Page One', 
    } 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: // ... 
    }; 
    } 

    _renderItem = ({item}) => (
    // ... 
); 

    render(){ 
    return(
     <FlatList 
      ListHeaderComponent={header} 
      data={this.state.data} 
      renderItem={this._renderItem} 
     /> 
    ) 
    } 
} 

Answer 1

リアクションナビゲーション想定していますか？

は、あなたのプロジェクトで反応ナビゲーションlibがインストールしてくださいナビゲーション まず反応しするため withNavigation HOC（ https://github.com/react-community/react-navigation/blob/aead8ff9fbd2aceb2d06c8049c8ad0d55d77b5ab/docs/api/withNavigation.md）

Answer 2

を使用しています。 そうでなければ、cmdで "npm install - save react-navigation"を実行します。 はその後

App.jsのように、すべてのルータ名を保持するためにApp.jsファイルを作成します。私の場合のSRCには

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

import Splash from './src/components/Splash/Splash' 
import Login from './src/components/Splash/Login' 

const Navigation = StackNavigator({ 
    Splash : { 
    screen : Splash 
    }, 
    Login : { 
    screen : Login 
    }, 
}) 
export default Navigation; 

ストアすべてのjsファイルのdirtecoryです。

ここで、index.android.jsにAppRegistry.registerComponentを設定します。

index.android.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View 
} from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 
import Splash from './src/components/Splash/Splash' 
import Navigation from './App' 
export class FirstReactDemo extends Component { 
    render() { 
    return (
     <Splash/> 
    ); 
    } 
} 
AppRegistry.registerComponent('FirstReactDemo',() => Navigation); 

さて、最初の画面でのonclickリスナーを設定します。

Splash.js

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

export default class SplashScreen extends Component { 



static navigationOptions = { 
     title: 'Splash', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text 
      onPress={() =>navigate('Login')} 
      style={styles.text}>My Splash screen</Text> 
     </View> 
    ); 
    } 
} 

次の画面のためのLogin.jsファイルを作成します。