Я смотрю компонент навигатора в 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 немного ограничен для настройки.