Question

我正在探索React Native的可能性，同时在Navigator component的帮助下开发一个在视图之间自定义导航的演示应用。

主app类渲染导航器，而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 });
                    }
                }}
             />
        );
    }
}

现在app包含两个视图：

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但没有导航栏（但是有些视图会有自己的自定义导航栏）。

Answer 1

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

Answer 2

现在不推荐使用Navigator组件。你可以使用来自askonov的react-native-router-flux，它有很多种类，支持许多不同的动画并且效率很高

Answer 3

正如其他人之前提到的，Navigator自v0.44以来已被弃用，但仍可导入以支持旧版应用程序：

导航器已从核心React Native包中删除   版本0.44。该模块已移至a   react-native-custom-components包可以由您导入   应用程序以保持向后兼容性。

要查看Navigator的原始文档，请切换到旧版本的   文档。

根据文档（React Native v0.54）Navigating Between Screens。现在，如果您刚开始使用，则建议使用React Navigation;对于非Android应用程序，建议使用NavigatorIOS

如果您刚刚开始使用导航，您可能会   想要使用反应导航。 React Navigation提供了易于使用的功能   导航解决方案，具有呈现常见堆栈导航的能力   iOS和Android上的选项卡式导航模式。

...

如果您仅针对iOS，您可能还需要查看 NavigatorIOS   作为一种以最小配置提供原生外观和感觉的方式   提供了一个围绕本机UINavigationController类的包装器。

NB ：在提供此答案时，React Native版本为0.54

使用React-Native中的Navigator组件进行自定义导航

3 个答案: