[英]How to do event handling for android and iOS in react native's new architecture for fabric components?
I am trying to create a Fabric
component.我正在尝试创建一个Fabric
组件。 I have got it working for the most part.我已经让它大部分工作了。 The only issue I am facing is I am not able to get click listener to work for a fabric
component.我面临的唯一问题是我无法让点击侦听器为fabric
组件工作。
I created a spec file我创建了一个规范文件
import type {HostComponent, ViewProps} from 'react-native';
import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
type Event = Readonly<{
value: string;
}>;
interface NativeProps extends ViewProps {
text: string;
onClickHandler?: BubblingEventHandler<Event>; ////Event name should start with on
}
export default codegenNativeComponent<NativeProps>(
'MyButtonView',
) as HostComponent<NativeProps>;
For android
my fabric
component looks like as follows对于android
,我的fabric
组件如下所示
public class MyButtonView extends androidx.appcompat.widget.AppCompatButton {
public MyButtonView(Context context) {
super(context);
configureViews();
}
private void configureViews(){
setBackgroundColor(Color.YELLOW);
setOnClickListener(view -> {
onReceiveNativeEvent();
});
}
public void onReceiveNativeEvent() {
WritableMap event = Arguments.createMap();
event.putString("message", "MyMessage");
ReactContext reactContext = (ReactContext)getContext();
reactContext.getJSModule(RCTModernEventEmitter.class)
.receiveEvent(getId(),getId(),"onClickHandler",true,0,event,1);
}
}
Not sure what to pass first param as int
, canCoalesceEvent
, customCoalesceKey
and category
in receiveEvent
不确定在 receiveEvent 中将first param as int
、 canCoalesceEvent
、 customCoalesceKey
和category
receiveEvent
In ViewManager
I did add following code as well在ViewManager
我也添加了以下代码
@Nullable
@Override
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
Log.i("here55","999999");
return MapBuilder.of("onClickHandler",
MapBuilder.of("registrationName", "onClickHandler")
);
}
For android
I am not getting the callback
from native
android
to js
side对于android
,我没有得到从native
android
到js
端的callback
I am following https://reactnative.dev/docs/native-components-android but it was for the old architecture and I think is not applicable for fabric
components我正在关注https://reactnative.dev/docs/native-components-android但它适用于旧架构,我认为不适用于fabric
组件
Same for iOS
https://reactnative.dev/docs/native-components-ios , the doc is not very helpful for the new architecture同样适用于iOS
https://reactnative.dev/docs/native-components-ios ,该文档对新架构不是很有帮助
For iOS
, I created the header
and objective-c++
file对于iOS
,我创建了header
和objective-c++
文件
Typically if we want to add property we do this通常,如果我们想添加属性,我们会这样做
RCT_EXPORT_VIEW_PROPERTY(text, NSString)
Not sure how to do it for event handler不确定如何为事件处理程序执行此操作
Complete source code is here https://github.com/PritishSawant/ReactNativeFabricEventListenerExample完整的源代码在这里https://github.com/PritishSawant/ReactNativeFabricEventListenerExample
Assuming native spec you posted is correct (I'm not really familiar with TypeScript + Codegen duo) when you run pod install
command in your ios/
directory codegen should generate EventEmitters
cpp file (+ header) in React-Codegen
pod (you can see below how to find it in XCode)假设您发布的本机规范是正确的(我不太熟悉 TypeScript + Codegen duo),当您在ios/
目录中运行pod install
命令时, codegen应该在React-Codegen
pod 中生成EventEmitters
cpp 文件(+ 标头)(您可以看到下面如何在 XCode 中找到它)
link to the screenshot with Pods structure链接到带有 Pod 结构的屏幕截图
You can then use these classes in your Objective-C++
code to emit the events:然后,您可以在Objective-C++
代码中使用这些类来发出事件:
if (_eventEmitter != nullptr) {
std::dynamic_pointer_cast<const facebook::react::$$NAME OF YOUR EVENT EMITTER TYPE$$>(_eventEmitter)
->onEvent(facebook::react::$$NAME OF YOUR EVENT EMITTER TYPE::OnEvent{.value = $$VALUE$$});
}
See links below to see how it is done in react-native-screens
请参阅下面的链接以了解它是如何在react-native-screens
中完成的
Flow
Flow
中的原生组件规范
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.