react-native实现文字的跑马灯设计

最近在项目开发中遇到一个问题，当文字超出显示区域时使其以跑马灯的形式动态显示。react-native中显示文本用到的组件为Text，但Text并没有相关的属性用于设置文字的跑马灯显示，只有numberOfLines这个属性用于设置显示的行数，超出的部分显示省略号。而android中可以利用TextView设计文字的跑马灯显示，因此通过封装原生的TextView组件可以在react端实现文字的跑马灯设计。具体步骤包括：1、继承TextView组件，改写isFocused方法；2、封装TextView组件，在js端调用。

一、继承TextView组件

在android端实现文字的跑马灯效果需要继承TextView，改写isFocused方法；此外，由于TextView的setTextColor方法只能接受int类型的颜色值，而在js中无法将string类型的十六进制颜色值转换成int类型，因此还需要重新定义setTextColor方法，使其接收string类型的十六进制颜色值，代码如下：

public MarqueeTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    public MarqueeTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public MarqueeTextView(Context context) {
        super(context);
    }
    @Override
    public boolean isFocused() {
        //就是把这里返回true即可
        return true;
    }

    public void setTextColor( String color) {
        int intColor = Color.parseColor(color);
        super.setTextColor(intColor);
    }

二、封装MarqueeTextView组件，在js端调用。

具体步骤包括：1、创建ViewManager的子类TextViewManager，实现getName、createViewInstance方法，通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法 ；2、注册TextViewManeger，创建ReactViewPackage类；3、实现js端调用。

1、创建TextViewManager类，代码如下：

public class TextViewManager extends SimpleViewManager {
    @Override
    public String getName() {
        return "ReactMarqueeTextView";
    }

    @Override
    protected MarqueeTextView createViewInstance(ThemedReactContext reactContext) {
        MarqueeTextView marqueeTextView = new MarqueeTextView(reactContext);
        marqueeTextView.setMarqueeRepeatLimit(-1);
        marqueeTextView.setEllipsize(TextUtils.TruncateAt.valueOf("MARQUEE"));
        marqueeTextView.setSingleLine(true);
        marqueeTextView.setSelected(true);
        marqueeTextView.setGravity(Gravity.CENTER_VERTICAL);
        return marqueeTextView;
    }

    @ReactProp(name="text")
    public void setText(MarqueeTextView marqueeTextView,String text){
        marqueeTextView.setText(text);
    }

    @ReactProp(name="textSize")
    public void setTextSize(MarqueeTextView marqueeTextView,float fontSize){
        marqueeTextView.setTextSize(fontSize);
    }

    @ReactProp(name = "textColor")
    public void setTextColor(MarqueeTextView marqueeTextView,String textColor){
        marqueeTextView.setTextColor(textColor);
    }

    @ReactProp(name = "isAlpha", defaultBoolean = false)
    public void setTextAlpha(MarqueeTextView marqueeTextView, boolean isAlpha) {
        if (isAlpha) {
            marqueeTextView.setAlpha(0.5f);
        }
    }
}
其中setMarqueeRepeatLimit方法用于设置跑马灯的循环次数，setEllipsize方法用于设置当文字超出显示区域时的显示方式。

2、注册TextViewManager，代码如下：

public class ReactViewPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.asList(
                new TextViewManager()
        );
    }
}

3、js端调用，代码如下：

import PropTypes from 'prop-types';
import { requireNativeComponent, View } from 'react-native';
var reactMarqueeTextView = {
    name: 'ReactMarqueeTextView',
    propTypes: {
        text: PropTypes.string,
        textSize: PropTypes.number,
        textColor: PropTypes.number,
        isAlpha: PropTypes.bool,

        ...View.propTypes // 包含默认的View的属性
    }
}
module.exports = requireNativeComponent('ReactMarqueeTextView', reactMarqueeTextView);

然后，可以在js代码中导入ReactMarqueeTextView组件，实现文字的跑马灯效果。js代码如下：

                              
                                     {
                                        this.setState({ stationModalVisible: true })
                                    }}>
                                        

                                    
                                

在ReactMarqueeTextView外层View组件的onLayout事件中计算View的宽高，将其宽高赋值给ReactMarqueeTextView组件，代码如下：

onStationViewLayout(event) {
        let { width, height } = event.nativeEvent.layout;
        this.setState({
            stationViewWidth: width,
            stationViewHeight: height
        })
    }

至此，可以在react-native中实现文字的跑马灯设计。