javascript

 

I'm exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component - http://facebook.github.io/react-native/docs/navigator.html#content

The main app class renders navigator and inside renderScene returns passed component: 

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 });
                    }
                }}
             />
        );
    }
}

For now app contains 2 views: 

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>
        );
    }
}

What I want to figure out is -

  • I see in logs that when pressing "go to feed" renderScene is called several times though the view renders correctly once. Is it how the animation works? 

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

  • Generally does my approach conforms the React way, or it can be done better?

    • What I want to achieve is something similar to NavigatorIOS but without navigation bar (however some views will have their own custom navigation bar).

    Your approach should work great. In big apps at Fb, we avoid calling the require() for the scene component until we render it, which can save a bit of start-up time.

    The renderScene function should be called when the scene is first pushed to the Navigator. It will also be called for the active scene when the Navigator gets re-rendered. If you see renderScene get called multiple times after a push , then it is probably a bug.

    The navigator is still a work in progress, but if you find any problems with it please file on github and tag me! (@ericvicenti)

    Navigator现在在RN 0.44.0已弃用，您可以使用react-native-deprecated-custom-components来支持使用Navigator现有应用程序。

    Navigator component is deprecated now. You could use react-native-router-flux by askonov, it has a huge variety and supports many different animations and is efficient

    链接地址: http://www.djcxy.com/p/52124.html

    上一篇: 你可以在不调用setState的情况下强制React组件重新渲染吗？

    下一篇: JavaScript的