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

前言

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

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

ReactNative之主流架构搭建

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

<TabNavigator>
              <TabNavigator.Item
                  selected={this.state.selecedIndex == 0}
                  title="首页"
                  renderIcon={() => <Image source={{uri:'tabbar_icon_news_normal'}} style={styles.tabIconStyle}/>}
                  renderSelectedIcon={() => <Image source={{uri:'tabbar_icon_news_highlight'}} style={styles.tabIconStyle}/>}
                  onPress={() => {
                        this.setState({
                            selecedIndex:0
                        })
                  }}>

                  <NavigatorIOS initialRoute=
                                    {{
                                        component:XMGHome,
                                        title:'首页',
                                    }}
                                style={{flex:1}}
                  />
</TabNavigator>

• 实现效果

(非主流)未跳转.png (非主流)跳转.png

ReactNative主流界面搭建

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

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

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

• 主界面（导航）

render() {
        return (
            <NavigatorIOS initialRoute=
                              {{
                                  component:XMGMain,
                                  title:'首页',
                              }}
                          style={{flex:1}}
            />
        );
      }

• XMGMain:Tabbar界面

 <TabNavigator>
                <TabNavigator.Item
                    selected={this.state.selecedIndex == 0}
                    title="首页"
                    renderIcon={() => <Image source={{uri:'tabbar_icon_news_normal'}} style={styles.tabIconStyle}/>}
                    renderSelectedIcon={() => <Image source={{uri:'tabbar_icon_news_highlight'}} style={styles.tabIconStyle}/>}
                    onPress={() => {
                        this.setState({
                            selecedIndex:0
                        })
                    }}>
                    {/*一定要记得传navigator给子组件,否则子组件拿不到*/}
                    <XMGHome navigator={this.props.navigator}/>
                </TabNavigator.Item>
</TabNavigator>

• 实现效果

主流(未跳转).png 主流(跳转).png