React-Native中使用Navigatior和自定义Nav

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

源码还在这里

Navigator（RN提供的组件）

只要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上的所有部分都是可选项，可以什么都不设置，那就是一个空白的导航栏
那么对应的只要设置相应的文本或图片（文本优先）以及相应的响应事件，就可以实现想要的效果

效果图

导航栏使用