Native Antwort: Warum wird "Navigation" nicht an meine Komponente weitergegeben?

Question

Ich arbeite seit zwei Tagen an diesem Problem und nichts im Web scheint genau das zu sein, wonach ich suche.

Ich versuche, einen StackNavigator in meine React Native App zu implementieren, aber aus irgendeinem Grund wird "Navigation" nicht als Prop zu den beteiligten Komponenten weitergegeben. Daher, wenn ich this.props.navigation.navigator durch Drücken von Button aufrufen, erhalte ich den Fehler undefined is not an object (evaluating this.props.navigation.navigate).

Ich habe die Requisiten mehrmals geloggt und das Requisiten-Objekt ist leer, also ist das Problem kein Dekonstruktionsproblem-Objekt-Problem wie andere, die diesen Fehler bekommen haben, sondern die Tatsache, dass die Navigations-Prop ist nicht an erster Stelle.

Ich habe versucht, den Navigator-Code in eine eigene Datei und in der App.js-Datei zu platzieren, weil er dachte, dass er irgendwie aufgerufen wurde, nachdem die Komponenten gerendert wurden hat auch nicht funktioniert. Ich habe auch untersucht, ob es Teil der Requisiten im Ereignis componentDidMount ist. Immer noch nicht.

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


import { getDecks } from '../utils/api' 
import NewDeckView from './NewDeckView' 
import DeckListItem from './DeckListItem' 






export default class DeckListView extends Component { 

     constructor(props){ 


      super(props) 

      this.state = { 

       decks: [] 
      } 


     } 


     componentDidMount(){ 

      console.log('props now test',this.props) 
      getDecks() 
      .then(result => { 

       const parsedResult = JSON.parse(result); 
       const deckNames = Object.keys(parsedResult); 
       const deckObjects = []; 
       deckNames.forEach(deckName => { 
        parsedResult[deckName].key = parsedResult[deckName].title  
        deckObjects.push(parsedResult[deckName]) 
       }) 

       this.setState({ 
        decks:deckObjects 
       }) 

      }) 
     } 





     render(){ 

      return (



        <View style={styles.container}> 
         <Text style={styles.header}>Decks</Text> 
         <FlatList data={this.state.decks} renderItem={({item})=><DeckListItem title={item.title} noOfCards={item.questions?item.questions.length:0}/>} /> 
         <Button styles={styles.button} title="New Deck" onPress={()=>{this.props.navigation.navigate('NewDeckView')}}/> 
        </View> 

      ) 
     }  
} 


const styles = StyleSheet.create({ 


    header:{ 
     fontSize:30, 
     margin:20, 

    }, 

    container:{ 

     flex:1, 
     justifyContent:'flex-start', 
     alignItems:'center' 
    }, 

    button:{ 

     width:50 
    } 
}) 


const Stack = StackNavigator({ 

     DeckListView : { 
      screen: DeckListView, 

     }, 

     NewDeckView: { 
      screen:NewDeckView, 

     } 


    }) 

Answer 1

wie Vicky und Shubhnik Singh erwähnt, müssen Sie wie so die importierten Navigationsstapel in App.js machen:

import React from 'react'; 
import { Stack } from './navigator/navigator' 

export default class App extends React.Component { 

    render() { 

    return <Stack/> 
    } 
} 

Der Navigator sollte wie folgt und den ersten Schlüssel in dem Objekt aussieht an StackNavigator übergeben wird standardmäßig gerendert werden. In diesem Fall ist es DeckListView.

import { StackNavigator } from 'react-navigation' 
import DeckListView from '../components/DeckListView' 
import NewDeckView from '../components/NewDeckView' 



export const Stack = StackNavigator({ 

    DeckListView : { 
     screen: DeckListView, 
     navigationOptions: { 
      headerTitle: 'Home', 
}, 
    }, 


    NewDeckView: { 
     screen:NewDeckView, 
     navigationOptions: { 
      headerTitle: 'New Deck', 
}, 
    }, 




}) 

Danke Jungs für die Unterstützung! Irgendwie war das für mich in der Dokumentation nicht klar.