上一次我在這里記錄了我是如何處理上拉加載更多和下拉刷新的氢架，這次是應用中的導航功能以及自定義導航欄NavigationBar

源碼還在這里

Navigator（RN提供的組件）

只要App不止有一個場景，那么這個App肯定少不了一個導航控制器 (iOS中的NavigationController) Navigator是RN提供的官方組件朋魔，兼顧了iOS和Android岖研，這里有一個關于Navigator很詳細的教程

目標

用Navigator實現(xiàn) 【首頁（商品列表） --> 圖片詳情頁 --> 圖文詳情頁】這一系列的場景切換，另外在“圖文詳情”頁實現(xiàn)了通過滾動視圖的偏移量控制NavigationBar漸隱警检、漸現(xiàn)`

關鍵代碼

• root.js

  'use strict';
  import React from 'react'
   import { Provider } from 'react-redux'
   import configureStore from './store/store.js'
   import App from './containers/app.js'
   const store = configureStore();
   export default class Root extends React.Component {
          constructor(props) {
                 super(props);
              }
          render() {
                 return (
                        <Provider store={ store }>
                               <App />
                        </Provider>
                    );
        }
  }
  

• app.js

    把`ProductListContainer`設置為根視圖孙援，
  
    import React from 'react';
    import {
        View,
        Navigator
    } from 'react-native';
    import ProductListContainer from './ProductListContainer'
    export default class App extends React.Component {
        render() {
            let defaultComponent = ProductListContainer;
            return (
            <Navigator 
                initialRoute={{ component: defaultComponent }}
                configureScene={(route) => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator} />
                    //  上面的route.params 是為了方便后續(xù)界面間傳遞參數(shù)用的
                }} />
            );
        }
    } 
  

• 自定義NavitagionBar NavBarCommon.js(名字以后肯能會改)

  ListViewLoadMore/app/common/NavBarCommon.js

    render() {
        // leftTitle和leftImage 優(yōu)先判斷l(xiāng)eftTitle (即 文本按鈕和圖片按鈕優(yōu)先顯示文本按鈕)
        const { title, leftTitle, leftImage, leftAction, rightTitle, rightImage, rightAction } = this.props;
        return (
            <View style={[styles.barView, this.props.style]}>
                <View style={ styles.showView }>
                    {
                        (()=>{
                            if (leftTitle) {
                                return <TouchableOpacity style={styles.leftNav} onPress={ ()=>{leftAction()} }>
                                        <View style={{alignItems: 'center'}}>
                                            <Text style={styles.barButton}>{leftTitle}</Text>
                                        </View>
                                    </TouchableOpacity>
                            } else if (leftImage) {
                                return <TouchableOpacity style={styles.leftNav} onPress={ ()=>{leftAction()} }>
                                        <View style={{alignItems: 'center'}}>
                                            <Image source={ leftImage }/>
                                        </View>
                                    </TouchableOpacity>
                            };
                        })()
                    }
                    {
                        (()=>{
                            if (title) {
                                return <Text style={styles.title}>{title || ''}</Text>              
                            }
                        })()
                    }
                    {
                        (()=>{
                            if (rightTitle) {
                                return <TouchableOpacity style={styles.rightNav} onPress={ ()=>{rightAction()} }>
                                        <View style={{alignItems: 'center'}}>
                                            <Text style={styles.barButton}>{rightTitle}</Text>
                                        </View>
                                    </TouchableOpacity>
                            } else if (rightImage) {
                                return <TouchableOpacity style={styles.rightNav} onPress={ ()=>{rightAction()} }>
                                        <View style={{alignItems: 'center'}}>
                                            <Image source={ rightImage }/>
                                        </View>
                                    </TouchableOpacity>
                            }
                        })()
                    }
                    
                </View>
            </View>
        )
    }
  

調用的方法和示例：

首先引入組件

import NavigationBar from '../common/NavBarCommon.js'

1、 最簡單的樣式 只有標題

<NavigationBar title={'首頁'}/>

2扇雕、 標題赃磨、左邊按鈕

<NavigationBar style={{opacity: this.state.navOpacity}} title={'圖文詳情'} leftImage={ backIcon } leftAction={ this._backToFront.bind(this) }/>

3、 標題洼裤、左邊按鈕邻辉、右邊按鈕

<NavigationBar title={'圖片詳情'} leftImage={ backIcon } leftAction={ this._backToFront.bind(this) } rightTitle={'去看圖文詳情'} rightImage={ backIcon } rightAction={ this._toAnotherDetail.bind(this) } />

NavigationBar上的所有部分都是可選項，可以什么都不設置腮鞍，那就是一個空白的導航欄
那么對應的只要設置相應的文本或圖片（文本優(yōu)先）以及相應的響應事件值骇，就可以實現(xiàn)想要的效果

效果圖

導航欄使用