Реагировать на корень - Навигатор Рекурсивные детские срывы

Я смотрю компонент навигатора в React-Native, но не могу заставить его принять дочерний node, который уже находится в стеке. Например. если мы возьмем приложение facebook, например. Пользователь может выполнить поиск пользователя, затем щелкнуть друзей, а затем щелкнуть другого пользователя. Это приводит к сбою, когда я пытаюсь добавить его в стек с ошибкой

Invariant Violation: Expected a component class, got [object Object].

Я пробовал это через стандартный навигатор и в настоящее время React-Native-Router. Мой текущий код выглядит следующим образом

class OptionsBranch extends Component {
    render() {
        /*<TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toRoute({name:"test", component:UserProfile})}}><Text>[push]</Text></TouchableHighlight>*/
        return (
            <View style={styles.container}>
                <Text>[OptionsScreen]</Text>
                <TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toRoute({id:"x", name:"test", component:UserProfile})}}><Text>[push]</Text></TouchableHighlight>
                <TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toBack()}}><Text>[pop]</Text></TouchableHighlight>
            </View>
        );
    }
}

Я могу заставить это работать бесконечно, пока я никогда не буду использовать класс. В тот момент, когда я это сделаю, я получаю сообщение об ошибке.

Я бы опубликовал ссылки на исследования, но для Navigator (а не NavigatorIOS) не так много, за исключением образцов, включенных в Framework, и они, похоже, достигли ti, но без прохождения полного маршрута, который мне понадобится.

например.

<NavButton onPress={() => { navigator.push(_getRandomRoute()) }} text="Push"/>

Если я попытаюсь использовать это в своем коде (без React-Native-Router), то есть

<TouchableHighlight onPress={() => { this.props.navigator.push({ name:"myComponent", component:myComponent }) }} />

также ошибки.

Почему это? Это ограничение Навигатора? Это ошибка в моем коде?

Приложение с панелью котлов, использующее TabBar и Navigator, могло бы быть полезно для изучения. NavigatorIOS немного ограничен для настройки.

Ответы

Ответ 1

Кажется, моя ошибка связана с циклической зависимостью.

Чтобы предотвратить это, я LazyLoaded классы, которые мне нужно заполнить Navigator. Вместо того, чтобы одеяло "требовало" их всех в верхней части js файлов (да, игнорируйте все те учебники, которые вы сделали). Вместо этого требуйте их в функциях, которые будут их использовать. Это устраняет циклическую зависимость и позволяет повторно использовать классы.

например. вместо этого:

var myClass = require('./MyClass');
...
(some other code)
...
render: function(){
    return(
        <TouchableHighlight onPress={ () => {this.props.toRoute( {name: "myPage", component: myClass, data: "SomeData" } )}>
            <Text>Link</Text>
        </TouchableHighlight>
    );
}

сделайте следующее:

goToMyRoute: function(myParameter){
    var myClass = require('./MyClass');
    this.props.toRoute( {name: "myPage", component: myClass, data: myParameter })
}

render: function(){
    return(
        <TouchableHighlight onPress={ () => {this.goToMyRoute("SomeData")} }>
            <Text>Link</Text>
        </TouchableHighlight>
    );
}