最近在項目開發中遇到一個問題,當文字超出顯示區域時使其以跑馬燈的形式動態顯示。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中實現文字的跑馬燈設計。