undefined는 개체가 아닙니다 ('_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

React Navigation 나는 가정한다?

는 프로젝트에서 반응 항법 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); 

이제 첫 번째 화면에서 온 클릭 리스너를 설정합니다.

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 파일을 만듭니다.