Я изучаю возможности React Native при разработке демонстрационного приложения с пользовательской навигацией между представлениями с помощью Навигатора - http://facebook.github.io/react-native/docs/navigator.html#content
Основной класс приложения отображает навигатор и внутри 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 });
}
}}
/>
);
}
}
Теперь приложение содержит 2 представления:
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
, но без навигационной панели (однако у некоторых представлений будет своя собственная панель навигации).
Ваш подход должен отлично работать. В больших приложениях в Fb мы избегаем вызова require()
для компонента сцены, пока мы не отобразим его, что может немного сократить время запуска.
Функция renderScene
должна вызываться, когда сцена сначала помещается в навигатор. Он также будет вызван для активной сцены, когда Navigator получит повторную визуализацию. Если вы видите, что renderScene
вызывается несколько раз после push
, то это, вероятно, ошибка.
Навигатор по-прежнему работает, но если вы обнаружите какие-либо проблемы с ним, напишите на github и пометьте меня! (@ericvicenti)
Navigator
теперь не используется в RN 0.44.0
, вы можете использовать react-native-deprecated-custom-components
вместо этого для поддержки существующего приложения, использующего Navigator
.