Skip to content

react-native-better-banner.md

Latest commit

 

History

History
154 lines (122 loc) · 8.71 KB

react-native-better-banner.md

File metadata and controls

154 lines (122 loc) · 8.71 KB

模板版本：v0.2.2

react-native-better-banner

Supported platforms License

[!TIP] Github 地址

安装与使用

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

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

npm

npm install @react-native-oh-tpl/react-native-better-banner

yarn

yarn add @react-native-oh-tpl/react-native-better-banner

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

[!WARNING] 使用时 import 的库名不变。

import React from 'react';
import {
    StyleSheet,
    View,
    Text,
} from 'react-native';

import BetterBanner from 'react-native-better-banner';

const App = () => {
    return (
        <View style={styles.container}>
            <BetterBanner
                bannerComponents={[
                    <View style={{
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#1997fc',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}>
                        <Text style={{fontSize: 35, color: '#fff', marginBottom: 10}}>Page 01</Text>
                        <Text style={{fontSize: 15, color: '#fff'}}>Welcome! have a good time</Text>
                    </View>,
                    <View style={{
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#da578f',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}>
                        <Text style={{fontSize: 35, color: '#fff', marginBottom: 10}}>Page 02</Text>
                        <Text style={{fontSize: 15, color: '#fff'}}>Welcome! have a good time</Text>
                    </View>,
                    <View style={{
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#7c3fe4',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}>
                        <Text style={{fontSize: 35, color: '#fff', marginBottom: 10}}>Page 03</Text>
                        <Text style={{fontSize: 15, color: '#fff'}}>Welcome! have a good time</Text>
                    </View>,
                ]}
                bannerTitles={["Page 01 Page 01 Page 01 Page 01 Page 01 Page 01 Page 01 ", "Page 02", "Page 03"]}
                onPress={(index) => alert('you pressed index is : ' + index)}
                indicatorContainerBackgroundColor={'rgba(0,0,0,0.3)'}
                isSeamlessScroll={true}
            />
        </View>
    );
};

const styles = StyleSheet.create({
   container: {
       flex: 1
   }

});

export default App;

约束与限制

兼容性

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

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

属性

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

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

Name Description Type Default Platform HarmonyOS Support
bannerImages 用于展示轮播图片, 与bannerComponents二选一 Array [] All Yes
bannerComponents 用于展示轮播自定义组件，与bannerImages二选一 Array [] All Yes
bannerHeight banner的默认高度 Number 250 All Yes
bannerTitles 每张图片或组件对应的标题 Array [] All Yes
bannerTitleTextColor 每张图片或组件对应的标题的文字颜色 String #fff All Yes
bannerTitleTextSize 每张图片或组件对应的标题的文字大小 Number 2000 All Yes
isAutoScroll 是否开启自动轮播 Boolean true All Yes
isSeamlessScroll 是否开启无缝滚动(iOS下正常，安卓某些机型可能出现滚动异常) Boolean false All Yes
adaptSeamlessScrollValue 如果开启无缝滚动在某些机型滚动异常，可针对这些机型设置true 或 false, 此值实际上是设置是否显示ScrollView的scrollTo的滚动动画 Boolean false All Yes
indicatorWidth 指示器宽度 Number 10 All Yes
indicatorHeight 指示器高度 Number 6 All Yes
indicatorColor 指示器颜色 String rgba(255,255,255,0.6) All Yes
indicatorStyle 指示器样式，您也可以直接使用此属性一次性设置指示器宽、高、颜色和圆角等，它会覆盖以上indicatorWidth,indicatorHeight，indicatorColor属性 Object {} No No
indicatorGap 指示器之间的间隔 Number 6 All Yes
activeIndicatorColor 活动指示器颜色 String #fff All Yes
indicatorGroupPosition 指示器组的位置，可设置left,center,right。如果您设置了bannerTitles,则此属性只能是right String right All Yes
indicatorGroupSideOffset 指示器组的左右边距 Number 10 All Yes
indicatorContainerHeight 指示器容器高度 Number 32 All Yes
indicatorContainerBackgroundColor 指示器容器背景色 String transparent All Yes
onPress() 点击轮播图后的回调函数，会传回banner的index Function ()=>{} All Yes
onScrollEnd() 滚动完每张轮播图的回调函数，等同于ScrollView的onMomentumScrollEnd Function ()=>{} All Yes

遗留问题

  • indicatorStyle属性问题：源码逻辑有问题导致属性失效。issue#11

其他

开源协议

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