Пользовательская навигация с компонентом Навигатор в React-Native

Я изучаю возможности 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>
        );
    }
}

То, что я хочу выяснить, это:

• Я вижу в журналах, что при нажатии "go to feed" renderScene вызывается несколько раз, хотя представление отображается правильно один раз. Это как работает анимация?

  index.ios.js:57 Object {name: 'WelcomeView', component: function}
  index.ios.js:57 Object {name: 'FeedView', component: function}
  // renders Feed View
  

• Как правило, мой подход соответствует пути React или лучше?

Я хочу добиться чего-то похожего на NavigatorIOS но без панели навигации (однако некоторые виды будут иметь собственную панель навигации).

Ответы

Ответ 1

Ваш подход должен отлично работать. В больших приложениях в Fb мы избегаем вызова require() для компонента сцены, пока мы не отобразим его, что может немного сократить время запуска.

Функция renderScene должна вызываться, когда сцена сначала помещается в навигатор. Он также будет вызван для активной сцены, когда Navigator получит повторную визуализацию. Если вы видите, что renderScene вызывается несколько раз после push, то это, вероятно, ошибка.

Навигатор по-прежнему работает, но если вы обнаружите какие-либо проблемы с ним, напишите на github и пометьте меня! (@ericvicenti)

Ответ 2

Navigator теперь не используется в RN 0.44.0, вы можете использовать react-native-deprecated-custom-components вместо этого для поддержки существующего приложения, использующего Navigator.

Ответ 3

Компонент навигатора устарел. Вы могли бы использовать response-native-router-flux by askonov, он имеет огромное разнообразие, поддерживает множество различных анимаций и эффективен

Ответ 4

Как уже упоминалось ранее, Navigator устарел с версии 0.44, но все еще может быть импортирован для поддержки более старых приложений:

Навигатор был удален из основного пакета React Native в версии 0.44. Модуль был перемещен в пакетact-native-custom-components, который может быть импортирован вашим приложением для обеспечения обратной совместимости.

Чтобы увидеть исходные документы для Navigator, перейдите на более старую версию документов.

В соответствии с документами (React Native v0.54) Навигация между экранами. Теперь рекомендуется использовать React Navigation, если вы только начинаете, или NavigatorIOS для приложений, отличных от Android

Если вы только начинаете навигацию, вам, вероятно, захочется использовать React Navigation. React Navigation предоставляет простое в использовании навигационное решение с возможностью представления общей навигации стека и шаблонов навигации с вкладками на iOS и Android.

...

Если вы ориентируетесь только на iOS, вы можете также проверить NavigatorIOS как способ предоставления собственного внешнего вида с минимальной конфигурацией, поскольку он предоставляет оболочку для собственного класса UINavigationController.

Примечание: на момент предоставления этого ответа React Native был версии 0.54.