Передача React-навигации компоненту Child of Child

Question

Я динамически создаю свой «экран» с использованием дочерних компонентов «строка» и «кнопка».Я использую этот метод только потому, что не могу найти свойство flex-flow, доступное для Reaction-native.

Так что в основном я сопоставляю массив массивов для построения каждой строки и внутри строки, отображая каждый массив для построения каждой кнопки.Поскольку onPress необходимо установить в кнопке, я передаю URL для каждого `onPress {() => this.props.navigation.navigate ({navigationURL})

в качестве реквизита, сначаластрока, а затем к кнопке.Проблема в том, что я получаю сообщение об ошибке «Не удается прочитать свойство« навигация »из неопределенного списка.Я уверен, что это потому, что только фактические «экраны» в навигаторе имеют доступ к опорам навигации.Я также пытался передать

 navigation={this.props.navigation}

, но безуспешно.Я просмотрел всю документацию и не могу найти ничего полезного.Кто-нибудь еще сталкивался с подобной ситуацией?

Answer 1

Ааа, глупая ошибка. Я не настраивал Реквизит в конструкторе. Спасибо Prasun Pal за помощь! Вот мой код, если у кого-то еще есть проблема.

 import React, { Component } from 'react'
    import { Image, Text, TouchableOpacity, View } from 'react-native'
    import { withNavigation } from 'react-navigation'



    class ButtonName extends Component {

        constructor(props) {
            super(props);
            this.state = {};
          }

        render() {
            return (

                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate('PageName')}
                >
                </TouchableOpacity>
            )
        }
    }

    export default withNavigation(ButtonName);

Answer 2

Если вы хотите получить доступ к объекту navigation из компонента, который не является частью navigator, поместите этот компонент в withNavigation HOC.Внутри обернутого компонента вы можете получить доступ к навигации, используя this.props.navigation.Взгляните на официальный документ

Образец

import { withNavigation } from 'react-navigation';
...
class CustomButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { 
      this.props.navigation.goBack() }} />;
    }
}

export default withNavigation(CustomButton);

Надеюсь, это поможет!