今天利用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={styles.container}>
<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 = 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; //整个屏幕的宽度
第二种转自CSDN博主「兔狲超凶的」
