11---
22id : fabric-native-components-android
3- title : ' Fabric 原生 UI 组件 :Android'
3+ title : ' Fabric 原生组件 :Android'
44---
55
66import Tabs from '@theme/Tabs '; import TabItem from '@theme/TabItem '; import constants from '@site/core /TabsConstants';
@@ -163,9 +163,9 @@ class ReactWebView: WebView {
163163 eventDispatcher?.dispatchEvent(event)
164164 }
165165
166- enum class OnScriptLoadedEventResult () {
167- success() ,
168- error()
166+ enum class OnScriptLoadedEventResult {
167+ success,
168+ error;
169169 }
170170
171171 inner class OnScriptLoadedEvent (
@@ -190,24 +190,24 @@ class ReactWebView: WebView {
190190然后,代码定义了一个实际发出事件的帮助函数。要发出事件,你必须:
191191
192192- 获取 ` ReactContext ` 的引用;
193- - retrieve the ` surfaceId ` of the view that you are presenting;
194- - grab a reference to the ` eventDispatcher ` associated with the view;
195- - build the payload for the event using a ` WritableMap ` object;
196- - create the event object that you need to send to JavaScript;
197- - call the ` eventDispatcher.dispatchEvent ` to send the event.
193+ - 获取当前所呈现视图的 ` surfaceId ` ;
194+ - 获取与该视图关联的 ` eventDispatcher ` 引用;
195+ - 使用 ` WritableMap ` 对象构建事件的负载;
196+ - 创建需要发送给 JavaScript 的事件对象;
197+ - 调用 ` eventDispatcher.dispatchEvent ` 发送事件。
198198
199- The last part of the file contains the definition of the data types you need to send the event:
199+ 文件的最后一部分包含了发送事件所需的数据类型定义:
200200
201- - The ` OnScriptLoadedEventResult ` , with the possible outcomes of the ` OnScriptLoaded ` event.
202- - The actual `` OnScriptLoadedEvent` that needs to extend the React Native's ` Event` class.
201+ - ` OnScriptLoadedEventResult ` ,表示 ` OnScriptLoaded ` 事件可能的结果。
202+ - 实际的 ` OnScriptLoadedEvent ` ,它需要继承 React Native 的 ` Event ` 类。
203203
204- ### 3. Write the ` WebViewManager `
204+ ### 3. 编写 ` WebViewManager `
205205
206- The ` WebViewManager ` is the class that connects the React Native runtime with the native view.
206+ ` WebViewManager ` 是将 React Native 运行时与原生视图连接起来的类。
207207
208- When React receives the instruction from the app to render a specific component, React uses the registered view manager to create the view and to pass all the required properties.
208+ 当 React 收到应用发来的渲染某个组件的指令时,它会使用已注册的 view manager 来创建该视图,并传入所有必需的属性。
209209
210- This is the code of the ` ReactWebViewManager ` .
210+ 下面是 ` ReactWebViewManager ` 的代码。
211211
212212<Tabs groupId =" android-language " queryString defaultValue ={constants.defaultAndroidLanguage} values ={constants.androidLanguages} >
213213<TabItem value =" java " >
@@ -327,31 +327,31 @@ class ReactWebViewManager(context: ReactApplicationContext) : SimpleViewManager<
327327</TabItem >
328328</Tabs >
329329
330- The ` ReactWebViewManager ` extends the ` SimpleViewManager ` class from React and implements the ` CustomWebViewManagerInterface ` , generated by Codegen.
330+ ` ReactWebViewManager ` 继承了 React 的 ` SimpleViewManager ` 类,并实现了由 Codegen 生成的 ` CustomWebViewManagerInterface ` 。
331331
332- It holds a reference of the ` CustomWebViewManagerDelegate ` , another element generated by Codegen.
332+ 它持有 ` CustomWebViewManagerDelegate ` 的引用,这也是由 Codegen 生成的另一个对象。
333333
334- It then overrides the ` getName ` function, which must return the same name used in the spec's ` codegenNativeComponent ` function call.
334+ 随后它重写了 ` getName ` 函数,该函数必须返回与 spec 中 ` codegenNativeComponent ` 调用所使用名称相同的值。
335335
336- The ` createViewInstance ` function is responsible to instantiate a new ` ReactWebView ` .
336+ ` createViewInstance ` 函数负责实例化一个新的 ` ReactWebView ` 。
337337
338- Then, the ViewManager needs to define how all the React's compnoents props will update the native view. In the example, you need to decide how to handle the ` sourceURL ` property that React will set on the ` WebView ` .
338+ 接着, ViewManager 需要定义 React 组件的各个 props 如何更新原生视图。在这个示例中,你需要决定如何处理 React 设置到 ` WebView ` 上的 ` sourceURL ` 属性。
339339
340- Finally, if the component can emit an event, you need to map the event name by overriding the ` getExportedCustomBubblingEventTypeConstants ` for bubbling events, or the ` getExportedCustomDirectEventTypeConstants ` for direct events.
340+ 最后,如果组件可以发出事件,你需要通过重写冒泡事件对应的 ` getExportedCustomBubblingEventTypeConstants ` ,或直接事件对应的 ` getExportedCustomDirectEventTypeConstants ` ,来映射事件名称。
341341
342- ### 4. Write the ` ReactWebViewPackage `
342+ ### 4. 编写 ` ReactWebViewPackage `
343343
344- As you do with Native Modules, Native Components also need to implement the ` ReactPackage ` class. This is an object that you can use to register the component in the React Native runtime.
344+ 与 Native Modules 类似, Native Components 也需要实现 ` ReactPackage ` 类。你可以使用这个对象在 React Native 运行时中注册组件。
345345
346- This is the code for the ` ReactWebViewPackage ` :
346+ 下面是 ` ReactWebViewPackage ` 的代码:
347347
348348<Tabs groupId =" android-language " queryString defaultValue ={constants.defaultAndroidLanguage} values ={constants.androidLanguages} >
349349<TabItem value =" java " >
350350
351351``` java title="Demo/android/src/main/java/com/webview/ReactWebViewPackage.java"
352352package com.webview ;
353353
354- import com.facebook.react.TurboReactPackage ;
354+ import com.facebook.react.BaseReactPackage ;
355355import com.facebook.react.bridge.NativeModule ;
356356import com.facebook.react.bridge.ReactApplicationContext ;
357357import com.facebook.react.module.model.ReactModuleInfo ;
@@ -363,7 +363,7 @@ import java.util.HashMap;
363363import java.util.List ;
364364import java.util.Map ;
365365
366- public class ReactWebViewPackage extends TurboReactPackage {
366+ public class ReactWebViewPackage extends BaseReactPackage {
367367 @Override
368368 public List<ViewManager<?, ?> > createViewManagers (ReactApplicationContext reactContext ) {
369369 return Collections . singletonList(new ReactWebViewManager (reactContext));
@@ -381,7 +381,7 @@ public class ReactWebViewPackage extends TurboReactPackage {
381381 public ReactModuleInfoProvider getReactModuleInfoProvider () {
382382 return new ReactModuleInfoProvider () {
383383 @Override
384- public Map<String , ReactModuleInfo > get () {
384+ public Map<String , ReactModuleInfo > getReactModuleInfos () {
385385 Map<String , ReactModuleInfo > map = new HashMap<> ();
386386 map. put(ReactWebViewManager . REACT_CLASS , new ReactModuleInfo (
387387 ReactWebViewManager . REACT_CLASS , // name
@@ -401,17 +401,17 @@ public class ReactWebViewPackage extends TurboReactPackage {
401401</TabItem >
402402<TabItem value =" kotlin " >
403403
404- ``` kotlin title="Demo/android/src/main/java/com/webview/ReactWebView .kt"
404+ ``` kotlin title="Demo/android/src/main/java/com/webview/ReactWebViewPackage .kt"
405405package com.webview
406406
407- import com.facebook.react.TurboReactPackage
407+ import com.facebook.react.BaseReactPackage
408408import com.facebook.react.bridge.NativeModule
409409import com.facebook.react.bridge.ReactApplicationContext
410410import com.facebook.react.module.model.ReactModuleInfo
411411import com.facebook.react.module.model.ReactModuleInfoProvider
412412import com.facebook.react.uimanager.ViewManager
413413
414- class ReactWebViewPackage : TurboReactPackage () {
414+ class ReactWebViewPackage : BaseReactPackage () {
415415 override fun createViewManagers (reactContext : ReactApplicationContext ): List <ViewManager <* , * >> {
416416 return listOf (ReactWebViewManager (reactContext))
417417 }
@@ -425,10 +425,10 @@ class ReactWebViewPackage : TurboReactPackage() {
425425
426426 override fun getReactModuleInfoProvider (): ReactModuleInfoProvider = ReactModuleInfoProvider {
427427 mapOf (ReactWebViewManager .REACT_CLASS to ReactModuleInfo (
428- _name = ReactWebViewManager .REACT_CLASS ,
429- _className = ReactWebViewManager .REACT_CLASS ,
430- _canOverrideExistingModule = false ,
431- _needsEagerInit = false ,
428+ name = ReactWebViewManager .REACT_CLASS ,
429+ className = ReactWebViewManager .REACT_CLASS ,
430+ canOverrideExistingModule = false ,
431+ needsEagerInit = false ,
432432 isCxxModule = false ,
433433 isTurboModule = true ,
434434 )
@@ -440,15 +440,15 @@ class ReactWebViewPackage : TurboReactPackage() {
440440</TabItem >
441441</Tabs >
442442
443- The ` ReactWebViewPackage ` extends the ` TurboReactPackage ` and implements all the methods required to properly register our component.
443+ ` ReactWebViewPackage ` 继承了 ` BaseReactPackage ` ,并实现了正确注册组件所需的全部方法。
444444
445- - the ` createViewManagers ` method is the factory method that creates the ` ViewManager ` that manage the custom views.
446- - the ` getModule ` method returns the proper ViewManager depending on the View that React Native needs to render.
447- - the ` getReactModuleInfoProvider ` provides all the information required when registering the module in the runtime,
445+ - ` createViewManagers ` 方法是一个工厂方法,用于创建管理自定义视图的 ` ViewManager ` 。
446+ - ` getModule ` 方法会根据 React Native 需要渲染的 View 返回相应的 ViewManager。
447+ - ` getReactModuleInfoProvider ` 提供了在运行时注册模块时所需的全部信息。
448448
449- ### 5. Register the ` ReactWebViewPackage ` in the application
449+ ### 5. 在应用中注册 ` ReactWebViewPackage `
450450
451- Finally, you need to register the ` ReactWebViewPackage ` in the application. We do that by modifying the ` MainApplication ` file by adding the ` ReactWebViewPackage ` to the list of packages returned by the ` getPackages ` function.
451+ 最后,你需要在应用中注册 ` ReactWebViewPackage ` 。具体做法是修改 ` MainApplication ` 文件,把 ` ReactWebViewPackage ` 添加到 ` getPackages ` 函数返回的包列表中。
452452
453453``` kotlin title="Demo/app/src/main/java/com/demo/MainApplication.kt"
454454package com.demo
@@ -497,4 +497,4 @@ class MainApplication : Application(), ReactApplication {
497497 }
498498}
499499
500- ```
500+ ```
0 commit comments