react-native-image-header-scroll-view, 在成为导航栏的标题中,ScrollView带有图像

分享于 

6分钟阅读

GitHub

  繁體 雙語
ScrollView with an image in header which become a navbar
  • 源代码名称:react-native-image-header-scroll-view
  • 源代码网址:http://www.github.com/bamlab/react-native-image-header-scroll-view
  • react-native-image-header-scroll-view源代码文档
  • react-native-image-header-scroll-view源代码下载
  • Git URL:
    git://www.github.com/bamlab/react-native-image-header-scroll-view.git
    Git Clone代码到本地:
    git clone http://www.github.com/bamlab/react-native-image-header-scroll-view
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bamlab/react-native-image-header-scroll-view
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-image-header-scroll-view

    badge

    类似于以下组件的scrollview:

    • 具有固定的图像头
    • 将图像保留为导航栏
    • 适用于iOS和 Android

    安装

    
    $ npm install react-native-image-header-scroll-view --save
    
    
    
    

    演示

    react-native-image-header-scroll-view demo android | react-native-image-header-scroll-view demo ios

    基本用法

    import HeaderImageScrollView, { TriggeringView } from'react-native-image-header-scroll-view';// Inside of a component's render() method:render() { return (
     <HeaderImageScrollViewmaxHeight={200}minHeight={MIN_HEIGHT}headerImage={require('../../assets/NZ.jpg')}> 
     <Viewstyle={{height:1000 }}>
     <TriggeringViewonHide={() =>console.log('text hidden')}> 
     <Text>Scroll Me!</Text>
     </TriggeringView>
     </View>
     </HeaderImageScrollView>
     );
    }

    你可以在一个专用存储库中找到示例。

    用户定义的用法( API )

    支持 ScrollView的所有属性。 请参考 ScrollView 文档了解更多细节。

    HeaderImageScrollView 处理也有下列道具。 无要求:

    属性类型默认说明示例
    renderHeaderfunction空视图返回要用作标题的组件的函数。 它可以返回背景图像例如。示例
    headerImage图像源道具( 对象或者数字)undefined快捷方式 renderHeader={() => <Image source={this.props.headerImage} style={{ height: this.props.maxHeight, width: Dimensions.get('window').width }}/>}示例
    maxHeightnumber80标题的最大高度示例
    minHeightnumber125标题的最小高度( 在导航栏模式中)示例
    minOverlayOpacitynumber0任何滚动前标题上黑色覆盖的不透明度示例
    maxOverlayOpacitynumber0.3导航栏模式下标题上黑色覆盖的不透明度示例
    overlayColorstringblack页眉上覆盖的颜色示例

    前景

    属性类型默认说明示例
    renderForegroundfunction空视图返回在前景中使用的组件的函数。 组件在标题前呈现,并使用ScrollView滚动。 它可以返回一个标题,例如。示例
    renderFixedForegroundfunction空视图返回要用作固定前景的组件的函数。 组件与标题一起显示,但不受覆盖的影响。示例
    foregroundParallaxRationumber1滚动时前景视差效应的定量。 如果为 2,则标题的速度将比滚动头快2 倍示例
    fadeOutForegroundboolfalse如果设置,在向上滚动时,在前景上添加淡出效果示例
    renderTouchableFixedForegroundfunction空视图renderFixedForeground 相同,但允许在其中使用触摸屏。 可能会导致Android系统性能问题。示例

    混合

    属性类型默认说明示例
    ScrollViewComponentComponentScrollView用于滚动的组件。 可以是任何带有 onScroll 支柱的组件( IE。 ListViewFlatListSectionList 或者 ScrollView )示例
    scrollViewBackgroundColorstringwhitescrollView内容的背景颜色示例

    TriggeringView

    模块还导出TriggeringView组件。 当它消失或者出现在ImageHeaderScrollView的顶部时,它是一个接受回调的简单视图。 你可以在dedicate库中看到示例。

    支持 View的所有属性。

    属性类型说明
    onBeginHiddenfunction当组件开始在滚动视图的顶部隐藏时调用。
    onHidefunction在滚动后不再显示组件时调用
    onBeginDisplayedfunction组件开始滚动后再次显示时调用
    onDisplayfunction当组件再次显示时调用。
    onTouchTopfunction当组件的顶部触及ScrollView的顶部时调用。 ( onDisplay + onBeginHidden )
    onTouchBottomfunction当组件的底部触及ScrollView的顶部时调用。 ( onHide + onBeginDisplayed )

    其他开放源码模块,由 BAM的人


    图像  滚动  HEAD  Header  
    相关文章