fix(react): 支付宝小程序插件配置字段缺失、Taro专有Hooks在小程序插件页面中无法使用

packages/taro-loader/src/native-component.ts

@@ -35,7 +35,8 @@ import { container, SERVICE_IDENTIFIER } from '@tarojs/runtime'
 import { createNativeComponentConfig } from '${creatorLocation}'
 ${importFrameworkStatement}
 var hooks = container.get(SERVICE_IDENTIFIER.Hooks)
-hooks.initNativeApiImpls = [defaultReconciler.initNativeApi]
+
+hooks.initNativeApiImpls = [...(hooks.initNativeApiImpls || []), defaultReconciler.initNativeApi]
 var component = require(${stringify(componentPath)}).default
 var config = ${configString};
 var inst = Component(createNativeComponentConfig(component, ${frameworkArgs}))

packages/taro-plugin-react/src/runtime/connect-native.ts

@@ -5,7 +5,10 @@ import {
   safeExecute,
   addLeadingSlash,
   incrementId,
-  eventHandler
+  eventHandler,
+  SERVICE_IDENTIFIER,
+  container,
+  IHooks
 } from '@tarojs/runtime'
 import { isClassComponent } from './utils'
 import { setReconciler } from './connect'
@@ -19,10 +22,12 @@ import type {
 
 declare const getCurrentPages: () => PageInstance[]
 
+const hooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 const getNativeCompId = incrementId()
-let R: typeof React
+export let RNative: typeof React
 let h: typeof React.createElement
 let ReactDOM
+export let PageContextNative: React.Context<string>
 
 function initNativeComponentEntry (R: typeof React, ReactDOM) {
   interface IEntryState {
@@ -34,9 +39,13 @@ function initNativeComponentEntry (R: typeof React, ReactDOM) {
 
   interface IWrapperProps {
     getCtx: () => any
-    renderComponent: (ctx: any) => React.ReactElement
+    renderComponent: (ctx: any) => React.ReactElement,
+    id: string,
   }
 
+  if (!PageContextNative) {
+    PageContextNative = R.createContext('')
+  }
   class NativeComponentWrapper extends R.Component<IWrapperProps, Record<any, any>> {
     root = R.createRef<TaroRootElement>()
     ctx = this.props.getCtx()
@@ -55,7 +64,13 @@ function initNativeComponentEntry (R: typeof React, ReactDOM) {
           {
             ref: this.root
           },
-          this.props.renderComponent(this.ctx)
+          h(
+            PageContextNative.Provider,
+            {
+              value: this.props.id
+            },
+            this.props.renderComponent(this.ctx)
+          )
         )
       )
     }
@@ -81,6 +96,7 @@ function initNativeComponentEntry (R: typeof React, ReactDOM) {
         compId,
         element: h(NativeComponentWrapper, {
           key: compId,
+          id: compId,
           getCtx,
           renderComponent (ctx) {
             return h(Component, { ...(ctx.data ||= {}).props, ...refs, $scope: ctx })
@@ -109,7 +125,7 @@ function initNativeComponentEntry (R: typeof React, ReactDOM) {
     }
   }
 
-  setReconciler(ReactDOM)
+  setReconciler(ReactDOM, hooks)
 
   const app = document.getElementById('app')
 
@@ -120,11 +136,11 @@ function initNativeComponentEntry (R: typeof React, ReactDOM) {
 }
 
 export function createNativeComponentConfig (Component, react: typeof React, reactdom, componentConfig) {
-  R = react
+  RNative = react
   h = react.createElement
   ReactDOM = reactdom
 
-  setReconciler(ReactDOM)
+  setReconciler(ReactDOM, hooks)
 
   const componentObj: Record<string, any> = {
     options: componentConfig,
@@ -139,7 +155,7 @@ export function createNativeComponentConfig (Component, react: typeof React, rea
     },
     created () {
       if (!Current.app) {
-        initNativeComponentEntry(R, ReactDOM)
+        initNativeComponentEntry(RNative, ReactDOM)
       }
     },
     attached () {

packages/taro-plugin-react/src/runtime/connect.ts

@@ -32,7 +32,7 @@ let ReactDOM
 const pageKeyId = incrementId()
 const hooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 
-export function setReconciler (ReactDOM) {
+export function setReconciler (ReactDOM, hooks) {
   hooks.getLifecycle = function (instance, lifecycle: string) {
     lifecycle = lifecycle.replace(/^on(Show|Hide)$/, 'componentDid$1')
     return instance[lifecycle]
@@ -183,7 +183,7 @@ export function createReactApp (
   const isReactComponent = isClassComponent(R, App)
   let appWrapper: AppWrapper
 
-  setReconciler(ReactDOM)
+  setReconciler(ReactDOM, hooks)
 
   function getAppInstance (): ReactAppInstance | null {
     return appInstanceRef.current

packages/taro-plugin-react/src/runtime/hooks.ts

@@ -4,13 +4,19 @@ import {
   getPageInstance,
   injectPageInstance
 } from '@tarojs/runtime'
-import { PageContext, R as React } from './connect'
+
+import * as Connect from './connect'
+import * as ConnectNative from './connect-native'
+
 import { HOOKS_APP_ID } from './utils'
 
 import type { Func, PageLifeCycle } from '@tarojs/runtime'
 
 const taroHooks = (lifecycle: keyof PageLifeCycle) => {
   return (fn: Func) => {
+    const PageContext = ConnectNative.PageContextNative || Connect.PageContext
+    const React = ConnectNative.RNative || Connect.R
+
     const id = React.useContext(PageContext) || HOOKS_APP_ID
 
     // hold fn ref and keep up to date
@@ -84,6 +90,8 @@ export const useAddToFavorites = taroHooks('onAddToFavorites')
 export const useReady = taroHooks('onReady')
 
 export const useRouter = (dynamic = false) => {
+  const React = ConnectNative.RNative || Connect.R
+
   return dynamic ? Current.router : React.useMemo(() => Current.router, [])
 }