最近在项目开发中遇到一个问题，当文字超出显示区域时使其以跑马灯的形式动态显示。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中实现文字的跑马灯设计。
