ReactNative之主流架构搭建(十四)

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之主流架构搭建

• 无论是iOSApp，还是安卓App,很多App都有同样一种界面结构，上面有个导航条，下面有个TabBar条.
• 比如网易新闻界面.
• 在iOS中，是用TabbarController+导航控制器实现，因此RN也是一样.
  • 在iOS中，TabbarController中包装导航控制器就能实现.
• 在RN中，TabBar包装导航，会有个一个问题，跳转的时候，底部条隐藏不了，但是通常跳转的时候，都需要隐藏底部条.

               }
                  renderSelectedIcon={() => }
                  onPress={() => {
                        this.setState({
                            selecedIndex:0
                        })
                  }}>

                  

• 实现效果

(非主流)未跳转.png

(非主流)跳转.png

ReactNative主流界面搭建

• 导航控制器包装TabBar就可以了，先搞个导航，在弄个tabBar

• 原理：其实切换，是直接把tabBar整个界面切换掉，所以底部条就没有了

• 有个注意点，TabBar里面的子控件没有navigation

• 主界面（导航）

render() {
        return (
            
        );
      }

• XMGMain:Tabbar界面

 
                 }
                    renderSelectedIcon={() => }
                    onPress={() => {
                        this.setState({
                            selecedIndex:0
                        })
                    }}>
                    {/*一定要记得传navigator给子组件,否则子组件拿不到*/}
                    
                

• 实现效果

主流(未跳转).png

主流(跳转).png