JavaScript的

我正在探索React Native的可能性，同时在Navigator组件的帮助下开发一个在视图之间定制导航的演示应用程序 - 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>
        );
    }
}

我想弄清楚的是 -

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

我想要实现的是类似于NavigatorIOS但没有导航栏（但某些视图将有自己的自定义导航栏）。

你的方法应该很好。 在Fb的大应用程序中，我们避免在渲染场景组件之前调用require() ，这可以节省一些启动时间。

当场景首次被推送到导航器时，应该调用renderScene函数。 当导航器重新渲染时，它也将被称为活动场景。 如果您在push后看到renderScene被多次调用，那么它可能是一个错误。

导航器仍在进行中，但如果您发现任何问题，请在github上提交并贴上标签！ （@ericvicenti）

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

导航组件现在已被弃用。 您可以通过askonov使用react-native-router-flux，它有很多种类，并支持许多不同的动画，并且效率很高

上一篇: javascript

下一篇: Client Routing (using react