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

上一次我在这里记录了我是如何处理上拉加载更多和下拉刷新的，这次是应用中的导航功能以及自定义导航栏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 (
                        
                               
                        
                    );
        }
  }
  

• 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 (
             {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return 
                    //  上面的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 (
            
                
                    {
                        (()=>{
                            if (leftTitle) {
                                return {leftAction()} }>
                                        
                                            {leftTitle}
                                        
                                    
                            } else if (leftImage) {
                                return {leftAction()} }>
                                        
                                            
                                        
                                    
                            };
                        })()
                    }
                    {
                        (()=>{
                            if (title) {
                                return {title || ''}              
                            }
                        })()
                    }
                    {
                        (()=>{
                            if (rightTitle) {
                                return {rightAction()} }>
                                        
                                            {rightTitle}
                                        
                                    
                            } else if (rightImage) {
                                return {rightAction()} }>
                                        
                                            
                                        
                                    
                            }
                        })()
                    }
                    
                
            
        )
    }
  

调用的方法和示例：

首先引入组件

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

1、 最简单的样式 只有标题

2、 标题、左边按钮

3、 标题、左边按钮、右边按钮

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

效果图

导航栏使用