react-native text实现跑马灯功能

最新推荐文章于 2024-09-14 08:14:12 发布
置顶 最新推荐文章于 2024-09-14 08:14:12 发布
阅读量1w 收藏 14
点赞数 11
分类专栏： ReactNative 文章标签： react-native 跑马灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_30949835/article/details/87919455
版权

由于查阅资料封装好的跑马灯都不是很完善，点击回调、多条数据、支持不理想。所以自己又封装了一个。这里送给大家使用。欢迎大家提出意见或建议。

ReactNative Marquee，Support iOS and Android。

使用了react-native中的Animated组件，利用纯js代码，实现Marquee(走马灯)组件。

github:

https://github.com/ZhangTaoK/react-native-marquee-ab
 

实现功能

  • 支持文本的水平滚动（向左、向右）
  • 支持文本的竖直滚动（向上、向下）
  • 支持多条文本数据
  • 支持每一条文本数据的点击事件
  • 支持自定义滚动速度
  • 支持自定义样式

 

 

事例演示

 

Install

npm

npm i react-native-marquee-ab --save

Props

本组件支持以下Api，如需要新的Api欢迎提出新的issues

MarqueeHorizontal props

  • duration (ms) 选填 执行时间 : 传入毫秒数，执行完整个动画的时间，默认为10秒传入10000。
  • speed (px/s) 选填 滚动速度 : 传入一秒钟执行多少像素的动画，用来替代duration，一般使用这个属性来控制滚动速度 默认为0，建议传入60。
  • textList ([{label : '1',value : '这是滚动文本'},...]) 必填 文本数组 : 滚动的文字数组，必须按照固定格式传参，value用作文本显示，label用作点击事件回调。
  • width (num) 选填 整个组件的宽度 ！！宽度不能使用flex！！
  • height (num) 选填 整个组件的高度 ！！高度不能使用flex！！
  • direction (string) 方向，值有 left、right
  • reverse (boolean) 是否倒叙整个字符串
  • separator (num) 两个item之间的间隙，默认20
  • bgContainerStyle (obj style) 选填 背景样式
  • textStyle (obj style) 选填 文本样式
  • onTextClick (fun) 点击事件回调 : 返回点击的textList中的item

MarqueeVertical props

  • duration (ms) 选填 执行时间 : 传入毫秒数，执行完整个动画的时间，默认为600毫秒。
  • textList ([{label : '1',value : '这是滚动文本'},...]) 必填 文本数组 : 滚动的文字数组，必须按照固定格式传参，value用作文本显示，label用作点击事件回调。
  • width (num) 选填 整个组件的宽度 ！！宽度不能使用flex！！
  • height (num) 选填 整个组件的高度 ！！高度不能使用flex！！
  • delay (ms) 文本停顿时间，默认1200毫秒
  • direction (string) 方向，值有 up、down
  • numberOfLines (num) 同一个数据的文本行数，默认为1
  • viewStyle (obj style) 每一行文本的样式
  • bgContainerStyle (obj style) 选填 背景样式
  • textStyle (obj style) 选填 文本样式
  • onTextClick (fun) 点击事件回调 : 返回点击的textList中的item

Usage

1.import

import { MarqueeHorizontal,MarqueeVertical } from 'react-native-marquee-ab';

2.Use

import { View, Dimensions } from 'react-native';
import { MarqueeHorizontal,MarqueeVertical } from 'react-native-marquee-ab';

...
    render() {
        let mWidth = Dimensions.get('window').width;
        return(
            <View style = {{flex : 1,backgroundColor : '#FFFFFF'}}>

                <View style = {{height : 10,backgroundColor : '#FFFFFF',width : '100%'}}/>

                <MarqueeHorizontal
                    textList = {[
                        {label : '1',value : 'item1:一闪一闪亮晶晶，满天都是小星星'},
                        {label : '2',value : 'item2:两只老虎跑的快'},
                        {label : '3',value : 'item3:蓝蓝的天上白云飘，白云下面小肥羊儿跑'},
                    ]}
                    speed = {60}
                    width = {mWidth}
                    height = {50}
                    direction = {'left'}
                    reverse = {false}
                    bgContainerStyle = {{backgroundColor : '#FFFF00'}}
                    textStyle = {{fontSize : 16,color : '#FF0000'}}
                    onTextClick = {(item) => {
                        alert(''+JSON.stringify(item));
                    }}
                />

                <View style = {{height : 10,backgroundColor : '#FFFFFF',width : '100%'}}/>
                
                <MarqueeHorizontal
                    textList = {[
                        {label : '1',value : 'item1:一闪一闪亮晶晶，满天都是小星星'},
                        {label : '2',value : 'item2:两只老虎跑的快'},
                        {label : '3',value : 'item3:蓝蓝的天上白云飘，白云下面小肥羊儿跑'},
                    ]}
                    speed = {60}
                    width = {mWidth}
                    height = {50}
                    direction = {'right'}
                    reverse = {false}
                    bgContainerStyle = {{backgroundColor : '#FFFF00'}}
                    textStyle = {{fontSize : 16,color : '#FF0000'}}
                    onTextClick = {(item) => {
                        alert(''+JSON.stringify(item));
                    }}
                />

                <View style = {{height : 10,backgroundColor : '#FFFFFF',width : '100%'}}/>

                <MarqueeVertical
                    textList = {[
                        {label : '1',value : 'item1:一闪一闪亮晶晶，满天都是小星星'},
                        {label : '2',value : 'item2:两只老虎跑的快'},
                        {label : '3',value : 'item3:蓝蓝的天上白云飘，白云下面小肥羊儿跑'},
                    ]}
                    width = {mWidth}
                    height = {50}
                    direction = {'up'}
                    numberOfLines = {1}
                    bgContainerStyle = {{backgroundColor : '#FFFF00'}}
                    textStyle = {{fontSize : 16,color : '#FF0000'}}
                    onTextClick = {(item) => {
                        alert(''+JSON.stringify(item));
                    }}
                />

                <View style = {{height : 10,backgroundColor : '#FFFFFF',width : '100%'}}/>

                <MarqueeVertical
                    textList = {[
                        {label : '1',value : 'item1:一闪一闪亮晶晶，满天都是小星星'},
                        {label : '2',value : 'item2:两只老虎跑的快'},
                        {label : '3',value : 'item3:蓝蓝的天上白云飘白云下面小肥羊儿跑羊儿哪里跑。'},
                    ]}
                    width = {mWidth}
                    height = {50}
                    direction = {'down'}
                    numberOfLines = {1}
                    bgContainerStyle = {{backgroundColor : '#FFFF00'}}
                    textStyle = {{fontSize : 16,color : '#FF0000'}}
                    onTextClick = {(item) => {
                        alert(''+JSON.stringify(item));
                    }}
                />

                <View style = {{height : 10,backgroundColor : '#FFFFFF',width : '100%'}}/>

                <View style = {{width : mWidth,height : 50,backgroundColor : '#FFFFFF',flexDirection : 'row',justifyContent : 'center',alignItems : 'center'}}>
                    <View style = {{width : mWidth / 2,height : 50,backgroundColor : '#FFFF00',borderRadius : 50 / 2,paddingHorizontal : 50 / 2}}>
                        <MarqueeHorizontal
                            textList = {[
                                {label : '1',value : 'item1:一闪一闪亮晶晶，满天都是小星星'},
                                {label : '2',value : 'item2:两只老虎跑的快'},
                                {label : '3',value : 'item3:蓝蓝的天上白云飘，白云下面小肥羊儿跑'},
                            ]}
                            speed = {60}
                            width = {mWidth / 2 - 50}
                            height = {50}
                            direction = {'left'}
                            separator = {30}
                            reverse = {false}
                            bgContainerStyle = {{backgroundColor : '#FFFF00'}}
                            textStyle = {{fontSize : 16,color : '#FF0000'}}
                            onTextClick = {(item) => {
                                alert(''+JSON.stringify(item));
                            }}
                        />
                    </View>
                </View>
            </View>
        )
    }
...

注意事项： 由于宽度只能使用数值所以如果想要宽度满屏的话需要这样使用，这样获取到宽度再赋值给width就可以了

import { Dimensions } from 'react-native';

...
 mWidth = Dimensions.get('window').width;  //整个屏幕的宽度
...
吃小笼包嘛？
关注
专栏目录
React Native之常用第三方库
xiangzhihong8的专栏
01-01 1万+
前言React Native出来一年多了，受到各大开发人员的喜爱，但是由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。 那么我们今天说说在React Native
React Native Animated实现的走马灯/轮播动画小示例
xc2430939709的专栏
07-02 6243
``` import React, { Component } from 'react'; import { StyleSheet, Animated, Easing, View, Text, } from 'react-native'; import Dimensions from 'Dimensions'; export default class extends
reactnative水平竖直滚动跑马灯
08-10
react-native 水平/竖直滚动跑马灯。支持多个text数据，支持点击事件回调，自定义宽度、样式。
React Native Marquee 组件使用教程
最新发布
gitblog_00008的博客
09-14 933
React Native Marquee 组件使用教程 marquee A React Native Marquee component. 项目地址: https://gitcode.com/gh_mirrors/marqu/ma...
react-native-marquee-ab:react-native 水平竖直滚动跑马灯。支持多个text数据，支持点击事件回调，自定义宽度、样式
05-17
react-native-marquee-ab Marquee，Support iOS and Android。 使用了react-native中的Animated API，且只使用了react-native&js代码，实现Marquee(走马灯)组件。 支持的功能 v2.0.0-rc.1 新增： 增加水平滚动时首尾相连的功能。 增加水平滚动的Swiper模式。 修改水平滚动模式，更换为Animated.loop方法，使首尾相连的不间断滚动更加丝滑。 更多功能正在开发中... 上一版本(v1.2.6)： 支持文本的水平滚动（向左、向右） 支持文本的竖直滚动（向上、向下） 支持多条文本数据 支持每一条文本数据的点击事件 支持自定义滚动速度 支持自定义样式 支持竖直滚动在头部添加自定义view 其他请阅读本组件支持的Api 事例演示 Version 2.0.0-rc.1 ！！！暂无新版本演示
一个 react-native 文字跑马灯组件
weixin_34268610的博客
04-15 906
一个 react-native 文字跑马灯组件。 如果你需要从下往上滚动的跑马灯, 请使用 react-native-lahk-marquee-label-vertical. 描述 我在一个项目中需要用到跑马灯，但是在网上没找到好用的。所以我就自己写了一个跑马灯的组件。 本来打算让它可以在 iOS 和 Android 平台上都好用的，不...
react-native跑马灯
RuGal_的博客
11-25 971
https://github.com/ZhangTaoK/react-native-marquee-ab
用reactnative开发的一个简单跑马灯抽奖demo
08-10
用react-native开发的一个简单跑马灯抽奖demo，使用了react-navigation，可以自定义奖品名称，抽奖定时等
用js写了一个RN的跑马灯
08-11
在React Native（RN）中，我们可以利用JavaScript来实现这一功能，因为RN允许开发者使用JavaScript编写原生级别的移动应用。本文将深入探讨如何使用JavaScript为RN创建一个跑马灯组件。 首先，我们需要了解React ...
react native 垂直 scrollview 自动滚动，自动播放文字，垂直走马灯效果
qq_32683045的博客
08-13 3521
您需要的是垂直自动控制滚动scrollview 或者，类似垂直的走马灯效果，可以用onLayout获取scrollview内部textview的高度，然后知道行高，在用scrollTo去驱使滚动，看代码 <ScrollView ref={(ref) => this.scrollview = ref} > <Text onLayout={(res...
推荐开源项目：React Native MarqueeLabel，打造流畅跑马灯效果
gitblog_00047的博客
06-26 508
推荐开源项目：React Native MarqueeLabel，打造流畅跑马灯效果 react-native-marquee-labelA marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-...
react-native中使用ScrollView组件自己封装走马灯
01-08
使用ScrollView替代View可以实现安全范围内的滚动 showsVerticalScrollIndicator隐藏滚动条 制作轮播图 import { View, Text, StatusBar, SafeAreaView, StyleSheet, ScrollView, Image, Dimensions, } from 'react-native'; const screenWidth = Math.round(Dimensions.get('window').width); const App = () => { const scrollR
跑马灯文字滚屏效果
06-09
超简单跑马灯文字滚屏效果，兼容IE、火狐
文字自动滚动效果_俗称：文字跑马灯效果
02-21
文字可以自己滚动，无缝衔接的文字跑马灯效果。没毛病！
js实现文字跑马灯效果
10-20
本文主要介绍了js实现文字超过显示宽度每间隔1s自动向左滚动显示的跑马灯效果，具有很好的参考价值，下面跟着小编一起来看下吧
react-native-marquee:React本机字幕文本组件
05-02
React本机字幕 一个纯JavaScript字幕文本组件，用于本地响应。 展示柜 该应用程序可在和。 安装 npm install --save react-native-marquee or yarn add react-native-marquee 用法 import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import MarqueeText from 'react-native-marquee'; export default class MarqueeTextSample extends Component { render() { return ( <View xss=removed>
react 文字跑马灯
小鑫の随笔
12-08 3567
之前的一个 pc 端项目，有文字滚动的功能，找了下，没有合适的轮子，于是自己造了一个 目前只支持横向滚动 index.tsx import React, { useRef, useEffect, useState } from 'react' import './index.css' import styled from 'styled-components' interface TextScrollProps { /** * 内容 */ content: string /**
react 文字跑马灯从左往右滚动鼠标移入移出控制
qq_35367109的博客
06-05 1446
本人React用的时间较短，有代码上的不规范或者不简洁的地方请见谅~ 附上代码~~ import React from “react”; import * as styles from ‘./notice.less’; import {Icon} from “antd”; import $ from “jquery”; state = { Notice: ‘我是一条公告！！！’, } componentDidMount() { this.marquee(this.state.Notice); } compo
react 文字水平滚动 文字走马灯
小橙的博客
04-01 6616
/** * 文字水平滚动 * 用法： */ import React, { PureComponent } from ‘react’; let dataArr = []; let distanceArr = []; export default class Marquee extends PureComponent { constructor(props) { super(props); this...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值