上一次我在这里记录了我是如何处理上拉加载更多和下拉刷新的，这次是应用中的导航功能以及自定义导航栏NavigationBar

源码还在这里

只要App不止有一个场景，那么这个App肯定少不了一个导航控制器 (iOS中的NavigationController) Navigator是RN提供的官方组件，兼顾了iOS和Android，这里有一个关于Navigator很详细的教程

这次要用Navigator实现 【首页（商品列表） --> 图片详情页 --> 图文详情页】这一系列的场景切换，另外在“图文详情”页实现了通过滚动视图的偏移量控制NavigationBar渐隐、渐现

截取关键代码

  • 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 是为了方便后续界面间传递参数用的
                }} />
            );
        }
    }

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

    ListViewLoadMore/app/common/NavBarCommon.js

render() {
    // leftTitle和leftImage 优先判断leftTitle (即 文本按钮和图片按钮优先显示文本按钮)
    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上的所有部分都是可选项，可以什么都不设置，那就是一个空白的导航栏
那么对应的只要设置相应的文本或图片（文本优先）以及相应的响应事件，就可以实现想要的效果

效果图

导航栏使用

赏

本文地址： http://yongqianvip.github.io/2016/08/01/RNNavigationBar/