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

112

Я изучаю возможности 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, но без навигационной панели (однако у некоторых представлений будет своя собственная панель навигации).

  • 1
    @ericvicenti этот пример должен быть включен на странице навигатора в документах. Он более полный и дает более полное представление о том, как использовать компонент «Навигатор» в контексте.
  • 0
    Просто пробуя свой пример, должна ли сцена автоматически меняться, когда происходит нажатие навигатора? Для меня твой пример никогда не показывает вид канала! текст, так что мне интересно, если что-то изменилось с последними версиями.
Теги:
react-native
navigation

2 ответа

55
Лучший ответ

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

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

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

2

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню