小白在封装一个android端封装一个滑动条,在拖动监听事件的信息(int progress)回调到RN端,在RN端接收到的却是[Object Object]
android端关键代码:
protected View createViewInstance(ThemedReactContext reactContext) {
this.reactContext = reactContext;
rootView = LayoutInflater.from(reactContext).inflate(R.layout.seek_bar,null);;
mSeekBar = (SeekBar) rootView.findViewById(R.id.seek_bar);
mSeekBar.setMax(1000);
mSeekBar.setOnSeekBarChangeListener(this);
return rootView;
}
//停止拖动
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
WritableMap event = Arguments.createMap();
int progress = seekBar.getProgress();
event.putInt("progress",progress);
dispatchEvent(SeekBarEvent.EVENT_STOP_TOUCH.toString(),event);
}
private void dispatchEvent(String eventName,WritableMap eventData){
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
rootView.getId(),
eventName,
eventData
);
}
RN端:
import React,{Component, PropTypes }from 'react';
import {
requireNativeComponent,
UIManager,
findNodeHandle,
} from 'react-native';
var RCT_SEEK_BAR_REF = 'SeekBarAndroid';
class SeekBarAndroid extends Component{
constructor(props){
super(props);
}
_onStopTrackingTouch(event){
if(!this.props.onStopTrackingTouch){
return;
}
this.props.onStopTrackingTouch(event.nativeEvent.progress);
}
render(){
return <RCTSeekBarAndroid
ref = {RCT_SEEK_BAR_REF}
{...this.props}
/>
}
}
SeekBarAndroid.propTypes = {
onStopTrackingTouch:PropTypes.func,
...View.propTypes,
};
var RCTSeekBarAndroid = requireNativeComponent('SeekBarAndroid',SeekBarAndroid,{
nativeOnly: {onChange: true}
});
module.exports = SeekBarAndroid;
-----------------下面是使用:
<SeekBarAndroid style={{flex:1,height:20}}
onStopTrackingTouch={(progress)=>{
alert(progress);
}}
/>
结果:[object Object]