新手理解Navigator的教程



  • 您好,如果在RN应用中要调用一个OC方法,并且方法中需要传入一个视图控制器参数,这种情况在RN中应该如何处理呢?



  • 很棒的帖子。。谢谢大侠



  • 这个例子怎么能够在android下跑起来呀,弄半天,不能跑啊
    是不是需要建立三个文件,index.android.js,还有first,second这两个,然后把对应的三段代码复制进去,保存在同一目录下,然后run-android????,请知道的高手 帮忙给说说,谢谢



  • @souther 我已经在安卓上跑了起来了,他里面基本正确,但是还欠一些符号,比如,号,你需要修改一下,不过这个教程已经很详细了。



  • 您好,我按照您的教程在安卓的模拟器上使用,在选择chrome in debug的模式下,就无法从第一个页面跳转到第二个页面,,不选择debug模式,就可以正常的跳转。请问如何解决?



  • @qew4 能说明下哪里缺少,号么,另外,你是如何跑起来的,是我说的三个文件么?谢谢



  • 0_1453095565436_QQ图片20160118133914.png
    如何用navigator实现modal的效果呢?



  • Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Navigator.reactConsoleError @ ExceptionsManager.js:78console.error @ YellowBox.js:49warning @ warning.js:42ReactElementValidator.createElement @ ReactElementValidator.js:261_reactNative2.default.createElement.renderScene @ NavigatorComponent.js:23React.createClass._renderScene @ Navigator.js:1077(anonymous function) @ Navigator.js:1107React.createClass.render @ Navigator.js:1101ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:763ReactCompositeComponentMixin._renderValidatedComponent @ ReactCompositeComponent.js:785wrapper @ ReactPerf.js:70ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:721ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:702ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:612wrapper @ ReactPerf.js:70ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:538ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:115runBatchedUpdates @ ReactUpdates.js:151Mixin.perform @ Transaction.js:140Mixin.perform @ Transaction.js:140assign.perform @ ReactUpdates.js:94flushBatchedUpdates @ ReactUpdates.js:175wrapper @ ReactPerf.js:70Mixin.closeAll @ Transaction.js:213Mixin.perform @ Transaction.js:154ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:66enqueueUpdate @ ReactUpdates.js:208enqueueUpdate @ ReactUpdateQueue.js:24ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js:233ReactComponent.setState @ ReactComponent.js:75React.createClass.push @ Navigator.js:917_pressButton @ FirstPageComponent.js:30React.createClass.touchableHandlePress @ TouchableOpacity.js:116TouchableMixin._performSideEffectsForTransition @ Touchable.js:689TouchableMixin._receiveSignal @ Touchable.js:607TouchableMixin.touchableHandleResponderRelease @ Touchable.js:395invokeGuardedCallback @ ReactErrorUtils.js:27executeDispatch @ EventPluginUtils.js:98executeDispatchesInOrder @ EventPluginUtils.js:121executeDispatchesAndRelease @ EventPluginHub.js:43executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54forEachAccumulated @ forEachAccumulated.js:23EventPluginHub.processEventQueue @ EventPluginHub.js:287runEventQueueInBatch @ ReactEventEmitterMixin.js:18ReactEventEmitterMixin.handleTopLevel @ ReactEventEmitterMixin.js:45merge._receiveRootNodeIDEvent @ ReactNativeEventEmitter.js:120merge.receiveTouches @ ReactNativeEventEmitter.js:205__callFunction @ MessageQueue.js:176(anonymous function) @ MessageQueue.js:82guard @ MessageQueue.js:38callFunctionReturnFlushedQueue @ MessageQueue.js:81onmessage @ debuggerWorker.js:39
    ExceptionsManager.js:63 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Navigator.



  • <pre><code>
    <Navigator initialRoute={{name: 'HomeLiCaiPage', component: HomeLiCaiPage}}
    configureScene={
    () => Navigator.SceneConfigs.VerticalDownSwipeJump
    }
    renderScene={
    (route, navigator) => {
    const Component = route.component;
    if (Component) {
    return(<Component navigator={navigator} />);
    }
    }
    } />
    </code></pre>
    <pre><code>
    render() {
    return(
    <View style={styles.container}>
    <TouchableOpacity onPress={this.click}>
    <Text>
    点我
    </Text>
    </TouchableOpacity>
    </View>
    );
    }

    click() {
        const navigator = this.props.navigator;
        if (navigator) {
            navigator.push({
                name: 'TestPage',
                component: TestPage,
            });
        }
    }
    

    </code></pre>

    const navigator = this.props.navigator;这行总是报错。
    undefined is not an object (evaluating 'this.props.navigator')

    求大神帮我看看,感激涕零



  • 我跑了下没啥问题 下载这个 https://gist.github.com/sherlock221/c29dc79e4e15457bbf76 文件可以测试



  • 你好,我写了一个listview,我想点击一行然后进行跳转到另一个页面。
    代码是这样子的: _pressItem: function(rowID:number){
    if (rowID == 0) {
    return (
    <NavigatorIOS
    style={{flex : 1, marginTop : 0}}
    initialRoute={{
    title: '病人管理',
    component: SickList,
    }} />
    );
    //console.log('我点击了第一个Item');
    };

    我点击第一个按钮的时候,日志是打印出来的。。但是为什么没有跳转呢?是不是我哪里理解错了。求帮帮忙,谢谢



  • @Lesdesel Navigator是覆盖整个页面的大容器,这个容器只用在根页面创建一次,然后每次一整页一整页的push,你这是每一行item都新建了一个Navigator??



  • @sunnylqm 那是说一个APP只有一个Navigator?一个组件及其子组件都可以用同一个Navigator。我好像明白了一些



  • @Lesdesel 一般来说,只需要一个Navigator



  • 过来学习,支持下



  • 感谢分享。

    有几个小问题:

    1. 这个 Navigator 是否全局的?也就是说每个 app 应该有且仅有一个 Navigator,所有页面都通过它来调用(类似于 React 中的react-router)?
    2. 通过对route的判断是否能实现不同页面间采用不同的转场动画?想了一下,似乎是需要根据route判断出当前页和下一页,然后返回不同的动画参数,但是这个判断如何能做到呢


  • @brickyang
    1、不是全局的。有多少个Navigator,取决于具体的需求。Navigator严格意义上是一个容器,而不是传统意义上的路由。
    2、configureScene方法就是用来返回不同的转场动画的



  • @sunnylqm

    关于第二个问题我的疑问主要是如何在configureScene()中判断不同的跳转条件。

    例如,从首页去文章页用一种动画,从首页呼叫出设置页用另一种动画,这个判断怎么做?



  • @brickyang
    比如我会这么写

      configureScene(route) {
        return route.animationType || Navigator.SceneConfigs.FloatFromRight;
      }
    


  • @sunnylqm

    刚刚看到0.19升级增加了routeStack,就是用来根据界面堆栈定制打开动画的


Log in to reply