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

效果图
导航栏使用

你可能感兴趣的:(React-Native中使用Navigatior和自定义NavigationBar)