undefined ist kein Objekt (Bewertung '_this2.props.navigation.navigate')

Question

Wenn die Kopfzeile klickt, möchte ich, dass sie zur nächsten Seite navigiert. Ich weiß jedoch nicht, wie ich auf Navigationsrequisiten außerhalb der Klasse zugreifen kann. Irgendwelche Vorschläge, wie man das macht?

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

Reagieren Navigation nehme ich an?

verwenden, um die withNavigation HOC (https://github.com/react-community/react-navigation/blob/aead8ff9fbd2aceb2d06c8049c8ad0d55d77b5ab/docs/api/withNavigation.md)

Answer 2

Für in Ihrem Projekt Reagieren Navigation Stellen Sie zunächst sicher installiert reagieren Navigations lib. Wenn nicht, dann starte "npm install --save react-navigation" in cmd. Dann eine App.js Datei erstellen, um alle Router Namen wie

App.js zu halten:

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; 

In meinem Fall src dirtecory ist für den Shop alle js-Datei.

Setzen Sie jetzt AppRegistry.registerComponent in index.android.js.

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

Nun setzen, Onclick Zuhörer in ersten Bildschirm.

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

erstellen Login.js Datei für den nächsten Bildschirm.