React Native：「ナビゲーション」がコンポーネントに渡されないのはなぜですか？

Question

私は今この問題を2日間働いており、ウェブ上の何も正確に私が探しているものではないようです。

私はReact NativeアプリにStackNavigatorを実装しようとしていますが、なんらかの理由で「ナビゲーション」が関連するコンポーネントの小道具として渡されていません。ボタンを押してthis.props.navigation.navigatorと呼ぶと、エラーundefined is not an object (evaluating this.props.navigation.navigate)が出ます。

私はこの小道具を何度もログに記録していて、小道具のオブジェクトは空ですので、このエラーが発生した他の人たちのように、問題の解体は問題ではありませんが、最初はそこにいません。

Navigatorコードを独自のファイルに配置しようとしましたが、App.jsファイルでは、コンポーネントがレンダリングされた後に何らかの形で呼び出されたため、ナビゲーションプロップを渡す機会は得られませんでしたが、どちらもうまくいきませんでした。また、componentDidMountイベントの小道具の一部であるかどうかを調べました。まだありません。

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

ヴィッキーとShubhnikシンが述べたように、あなたがそうのようApp.jsで輸入ナビゲーションスタックをレンダリングする必要があります。

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

export default class App extends React.Component { 

    render() { 

    return <Stack/> 
    } 
} 

ナビゲータは次のようなものや、オブジェクトの最初のキーになりますStackNavigatorに渡された値はデフォルトでレンダリングされます。この場合、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', 
}, 
    }, 




}) 

ありがとうございました！どうにかして、これはドキュメントで私には分かりませんでした。