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<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中實現文字的跑馬燈設計。