2021-05-21关于rn跑马灯
今天利⽤rn完成⽂字跑马灯的功能，下⾯我分享2个插件实现。1） 利⽤react-native-marquee
（1）安装
npm install --save react-native-marquee 或 yarn add react-native-marquee
（2）使⽤
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 style={ainer}>
<MarqueeText
style={{ fontSize: 24 }}
duration={3000}  //滚动的持续时间
marqueeOnStart
loop  //循环滚动
marqueeDelay={1000}  //开始滚动的延迟时间
marqueeResetDelay={1000} //滚动的间隔时间
>
⽂字跑马灯⽂字跑马灯⽂字跑马灯⽂字跑马灯⽂字跑马灯⽂字跑马灯⽂字跑马灯⽂字跑马灯
</MarqueeText>
</View>
);
}
}
2）利⽤react-native-marquee-ab
（1）安装 npm i react-native-marquee-ab
（2）使⽤
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 = ('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}}>
marquee marquee<MarqueeHorizontal
textList = {[
{label : '1',value : 'item1:⼀闪⼀闪亮晶晶，满天都是⼩星星'},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。