首页 文章

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

提问于
浏览 次
141

我正在探索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 });
                    }
                }}
             />
        );
    }
}

现在app包含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>
        );
    }
}

我想弄清楚的是 -

  • 我在日志中看到，当按下"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但没有导航栏（但是一些视图将有自己的自定义导航栏） .

javascript ios navigation reactjs react-native

4 回答

  • 0

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

    首次将场景推送到导航器时，应调用 renderScene 函数 . 当导航器重新渲染时，也会调用活动场景 . 如果你看到 renderScene 在 push 后被多次调用，那么它可能是一个bug .

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

    回复于
  • 65

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

    Navigator已从版本0.44中的核心React Native软件包中删除 . 该模块已移至react-native-custom-components软件包，可由您的应用程序导入，以保持向后兼容性 . 要查看Navigator的原始文档，请切换到较旧版本的文档 .

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

    如果您刚开始使用导航，则可能需要使用React Navigation . React Navigation提供易于使用的导航解决方案，能够在iOS和Android上呈现常见的堆栈导航和选项卡式导航模式 . ...如果您只是针对iOS，您可能还需要检查NavigatorIOS，以便以最小配置提供本机外观，因为它提供了本机UINavigationController类的包装 .

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

    回复于
  • 2

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

    回复于
  • 0

    导航器组件现已弃用 . 你可以使用来自askonov的react-native-router-flux，它有很多种类，支持许多不同的动画，效率很高

    回复于

相关问题