Skip to content

Latest commit

 

History

History
300 lines (250 loc) · 13.5 KB

react-native-image-header-scroll-view.md

File metadata and controls

300 lines (250 loc) · 13.5 KB

模板版本：v0.2.2

react-native-image-header-scroll-view

Supported platforms License

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-image-header-scroll-view Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @react-native-oh-tpl/react-native-image-header-scroll-view

yarn

yarn add @react-native-oh-tpl/react-native-image-header-scroll-view

下面的代码展示了这个库的基本使用场景：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image,Animated,StatusBar, Dimensions ,Easing} from 'react-native';
import ImageHeaderScrollView ,{TriggeringView}  from 'react-native-image-header-scroll-view';
const MIN_HEIGHT = 80;
const MAX_HEIGHT = 250;
const tvShowContent = {
  title: 'Doctor Who',
  overview: `
    The Doctor looks and seems human. He's handsome, witty, and could be mistaken for just another man in the street.

    But he is a Time Lord: a 900 year old alien with 2 hearts, part of a gifted civilization who mastered time travel.

    The Doctor saves planets for a living – more of a hobby actually, and he's very, very good at it.

    He's saved us from alien menaces and evil from before time began – but just who is he?`,
  year: 2005,
  genres: ['Action & Adventure', 'Drama', 'Sci-Fi & Fantasy'],
  keywords: [
    'time travel',
    'time machine',
    'phone booth',
    'alien',
    'time traveler',
    'police box',
    'space and aliens',
  ],
};

const styles = StyleSheet.create({
  image: {
    height: MAX_HEIGHT,
    width: Dimensions.get('window').width,
    alignSelf: 'stretch',
    resizeMode: 'cover',
  },
  title: {
    fontSize: 20,
  },
  name: {
    fontWeight: 'bold',
  },
  section: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#cccccc',
    backgroundColor: 'white',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  sectionContent: {
    fontSize: 16,
    textAlign: 'justify',
  },
  keywords: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexWrap: 'wrap',
  },
  keywordContainer: {
    backgroundColor: '#999999',
    borderRadius: 10,
    margin: 10,
    padding: 10,
  },
  keyword: {
    fontSize: 16,
    color: 'white',
  },
  titleContainer: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageTitle: {
    color: 'white',
    backgroundColor: 'transparent',
    fontSize: 24,
  },
  navTitleView: {
    height: MIN_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 16,
    opacity: 0,
  },
  navTitle: {
    color: 'white',
    fontSize: 18,
    backgroundColor: 'transparent',
  },
  sectionLarge: {
    height: 600,
  },
});

function HeaderImageExample () {
    const [visible, setVisible] = useState(false);
    const fadeAnim = new Animated.Value(0);
    useEffect(() => {
        if (visible) {
          Animated.timing(fadeAnim, {
            toValue: 1,
            duration: 100,
            easing: Easing.bounce,
            useNativeDriver: true,
          }).start();
        } else {
          // 如果当前是不可见的，则执行淡出动画
          Animated.timing(fadeAnim, {
            toValue: 0,
            duration: 100,
            easing: Easing.bounce,
            useNativeDriver: true,
          }).start();
        }
      }, [visible, fadeAnim]);  
 
    return (
      <View style={{ flex: 1 }}>
        <StatusBar barStyle="light-content" />
        <ImageHeaderScrollView
          maxHeight={MAX_HEIGHT} 
          minHeight={MIN_HEIGHT}  
          maxOverlayOpacity={0.8} 
          minOverlayOpacity={0.2}   
          fadeOutForeground={true} 
          foregroundParallaxRatio={1}
          overlayColor={'blue'} 
          renderHeader={() => <Image source={'请输入本地图片路径'} style={styles.image} />} 
          renderFixedForeground={() => (
            <Animated.View
                    style={[styles.navTitleView,{ opacity: fadeAnim}]}  >
                    <Text style={styles.navTitle}>
                        {tvShowContent.title}, ({tvShowContent.year})
                    </Text>
            </Animated.View>
          )} 
          renderForeground={() => (
            <View style={styles.titleContainer}>
              <Text style={styles.imageTitle}>{tvShowContent.title}</Text>
            </View> as any
          )}  
          useNativeDriver={true}
          disableHeaderGrow={false}>
         <>
          <TriggeringView
            onHide={() => setVisible(true)}
            onDisplay={() => setVisible(false)}
          >
            <Text style={styles.title}>
              <Text style={styles.name}>{tvShowContent.title}</Text>, ({tvShowContent.year})
            </Text>
          </TriggeringView>
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Overview</Text>
            <Text style={styles.sectionContent}>{tvShowContent.overview}</Text>
          </View>
          <View style={[styles.section, styles.sectionLarge]}>
            <Text style={styles.sectionTitle}>Keywords</Text>
            <View style={styles.keywords}>
              {tvShowContent.keywords.map(keyword => (
                <View style={styles.keywordContainer} key={keyword}>
                  <Text style={styles.keyword}>{keyword}</Text>
                </View>
              ))}
            </View>
          </View>
          </>
        </ImageHeaderScrollView>
      </View>
    );
  
}

export default HeaderImageExample;

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-oh-tpl/react-native-image-header-scroll-view Releases

API

[!Tip] "Platform"列表示该属性在原三方库上支持的平台。

[!Tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Header

Name Description Type Required Platform HarmonyOS Support
renderHeader Function which return the component to use as header. It can return background image for example. function No All Yes
headerImage Shortcut for renderHeader={() => <Image source={this.props.headerImage} style={{ height: this.props.maxHeight, width: Dimensions.get('window').width }} Image source Props (object or number) No All Yes
maxHeight Max height for the header number No All Yes
minHeight Min height for the header (in navbar mode) number No All Yes
minOverlayOpacity Opacity of a black overlay on the header before any scroll number No All Yes
maxOverlayOpacity Opacity of a black overlay on the header when in navbar mode number No All Yes
overlayColor Color of the overlay on the header string No All Yes
useNativeDriver Use native driver for the animation for performance improvement. A few props are unsupported at the moment if useNativeDriver=true (onScroll, ScrollComponent, renderTouchableFixedForeground) boolean No All Yes
headerContainerStyle Optional styles to be passed to the container of the header component Object No All Yes
disableHeaderGrow Disable to grow effect on the header boolean No All Yes

Foreground

Name Description Type Required Platform HarmonyOS Support
renderForeground Function which return the component to use at foreground. The component is render in front of the header and scroll with the ScrollView. It can return a title for example. function No All Yes
renderFixedForeground Function which return the component to use as fixed foreground. The component is displayed with the header but not affected by the overlay. Image source Props (object or number) No All Yes
foregroundExtrapolate Optional prop that allows override extrapolate mode for foreground. Use null to allow extrapolation, which is usefull for using foreground as bottom title string No All Yes
foregroundParallaxRatio Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll number No All Yes
fadeOutForeground If set, add a fade out effect on the foreground when scroll up boolean No All Yes
renderTouchableFixedForeground Same as renderFixedForeground but allow to use touchable in it. Can cause performances issues on Android function No All Yes
fixedForegroundContainerStyles Optional styles to be passed to the container of the fixed foreground component Object No All Yes

Mixed

Name Description Type Required Platform HarmonyOS Support
ScrollViewComponent The component to be used for scrolling. Can be any component with an onScroll props (ie. ListView, FlatList, SectionList or ScrollView) Component No All Yes
scrollViewBackgroundColor Background color of the scrollView content string No All Yes

TriggeringView

Name Description Type Required Platform HarmonyOS Support
onBeginHidden Called when the component start to be hidden at the top of the scroll view. function No All Yes
onHide Called when the component is not displayed any more after scroll up function No All Yes
onBeginDisplayed Called when the component begin to be displayed again after scroll down function No All Yes
onDisplay Called when the component finished to be displayed again. function No All Yes
onTouchTop Called when the component finished to be displayed again. (onDisplay + onBeginHidden) function No All Yes
onTouchBottom Called when the component is not displayed any more after scroll up (onHide + onBeginDisplayed) function No All Yes

遗留问题

其他

  • foregroundExtrapolate属性无法生效，与Android、iOS一致：issue#2。
  • ScrollViewComponent属性无法滚动，与Android、iOS一致：issue#3。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。