Я изучаю возможности React Native при разработке демонстрационного приложения с настраиваемой навигацией между представлениями с помощью Navigator
компонента .
Основной класс приложения отображает навигатор, а внутри renderScene
возвращает переданный компонент:
class App extends React.Component {
render() {
return (
<Navigator
initialRoute={{name: 'WelcomeView', component: WelcomeView}}
configureScene={() => {
return Navigator.SceneConfigs.FloatFromRight;
}}
renderScene={(route, navigator) => {
// count the number of func calls
console.log(route, navigator);
if (route.component) {
return React.createElement(route.component, { navigator });
}
}}
/>
);
}
}
На данный момент приложение содержит два представления:
class FeedView extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>
Feed View!
</Text>
</View>
);
}
}
class WelcomeView extends React.Component {
onPressFeed() {
this.props.navigator.push({
name: 'FeedView',
component: FeedView
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome View!
</Text>
<Text onPress={this.onPressFeed.bind(this)}>
Go to feed!
</Text>
</View>
);
}
}
То, что я хочу выяснить, это:
Я вижу в журналах, что при нажатии «Перейти к каналу»
renderScene
вызывается несколько раз, хотя представление отображается правильно один раз. Это как работает анимация?index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View
Как правило, мой подход соответствует пути React или лучше?
Я хочу добиться чего-то похожего, NavigatorIOS
но без панели навигации (однако некоторые виды будут иметь собственную панель навигации).
javascript
ios
navigation
reactjs
react-native
Kosmetika
источник
источник
Ответы:
Ваш подход должен работать отлично. В больших приложениях на Fb мы избегаем вызова
require()
компонента сцены до тех пор, пока мы его не визуализируем, что может сэкономить немного времени запуска.renderScene
Функция должна быть вызвана , когда сцена первым толкнул в навигаторе. Он также будет вызываться для активной сцены, когда навигатор будет перерисован. Если вы видите, что вамrenderScene
звонят несколько раз после apush
, то это, вероятно, ошибка.Навигатор все еще находится в стадии разработки, но если вы обнаружите какие-либо проблемы с ним, пожалуйста, зарегистрируйтесь на github и отметьте меня! (@Ericvicenti)
источник
Navigator
устарела, теперьRN 0.44.0
вы можете использовать ееreact-native-deprecated-custom-components
вместо поддержки существующего приложения, которое вы используетеNavigator
.источник
Как уже упоминалось ранее, Navigator устарел с версии 0.44, но все еще может быть импортирован для поддержки более старых приложений:
В соответствии с документами (React Native v0.54) Навигация между экранами . Теперь рекомендуется использовать React Navigation, если вы только начинаете, или NavigatorIOS для не-Android приложений
Примечание : на момент предоставления этого ответа React Native был версии 0.54.
источник
Компонент навигатора устарел. Вы можете использовать response-native-router-flux от askonov, он имеет огромное разнообразие, поддерживает множество различных анимаций и эффективен
источник