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

96
藤风
0.1 2018.12.20 19:25 字数 500

最近在项目开发中遇到一个问题,当文字超出显示区域时使其以跑马灯的形式动态显示。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<MarqueeTextView> {
    @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<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>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代码如下:

                              <View
                                    onLayout={this.onStationViewLayout}
                                    style={style.renderClickTextContainerStyle}>
                                    <TouchableOpacity onPress={() => {
                                        this.setState({ stationModalVisible: true })
                                    }}>
                                        <ReactMarqueeTextView
                                            style={{
                                                height: stationViewHeight,
                                                width: stationViewWidth,
                                            }}
                                            text={finalSelectedStation}
                                            textSize={15}
                                            textColor={constant.TITLE_CLICK_COLOR}
                                        />

                                    </TouchableOpacity>
                                </View>

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

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

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

react native
Web note ad 1