前言

眼看很多公司都開始嘗試使用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