pinqy520 / react-native-webview-invoke Goto Github PK

const webviewRef = useRef<WebView<{}>>(null);
const Invoke: IMessager = createInvoke(()=>webviewRef.current); // 创建注入原生方法的实列
const { state } = useContext(StoreContext);
const isFocused = useIsFocused();

const _keyboardDidShow:(e:KeyboardEvent)=>void = (e) => {  // 键盘弹起
    const js = ` window.keyboardDidShow && window.keyboardDidShow(${ e.endCoordinates.height })`;
    webviewRef.current && webviewRef.current.injectJavaScript(js);
};
const _keyboardDidHide:()=>void = () => {  // 键盘收起
    const js = 'window.keyboardDidHide && window.keyboardDidHide()';
    webviewRef.current && webviewRef.current.injectJavaScript(js);
};
const _onBackHander:()=>boolean = ()=>{  // 物理返回键
    const js = 'window.onBackHander && window.onBackHander()';
    webviewRef.current && webviewRef.current.injectJavaScript(js);
    return true;
}
const _onAppState:(nextAppState:AppStateStatus)=>void = (nextAppState)=>{  //App前后台切换状态
    const currAppState = AppState.currentState;
    const js = `window.onAppState && window.onAppState(${currAppState},${nextAppState})`;
    webviewRef.current && webviewRef.current.injectJavaScript(js);
}
const _push = (url:string, data?:{[key:string]:any},headerOptions?:StackHeaderOptions):void=>{ // 打开一个新的webview
    console.log(99999)
   props.navigation.push('Home',{
       url,
       ...data,
       headerOptions
   })
};
const _pop = ()=>{ // 返回上一个路由栈
    props.navigation.goBack();
}
const _setBarStyle = (color:StatusBarStyle)=>{  // 设置状态栏字体颜色
    if(_PLATFROM == 'ios') NativeModules.Tools.setBarStyle(color);
    else StatusBar.setBarStyle(color);
}
const _getStatusBarHeight:()=>number | undefined = ()=>{  // 获取状态栏高度
    return statusBarHeight
};
const _exitApp:()=>void = ()=>{  // 退出app
    if(_PLATFROM == 'android') BackHandler.exitApp();
}
const _reload:()=>void = ()=>{  // 重新加载
    webviewRef.current?.reload();
}

useEffect(()=>{ //   定义注入webview的原生方法
    //  打开一个新的webview 
    Invoke.define('push',_push);
    //  回退路由栈
    Invoke.define('pop',_pop)  
    //  设置状态栏样式'default' | 'light-content' | 'dark-content';
    Invoke.define('setBarStyle', _setBarStyle);
    //  获取状态栏高度
    Invoke.define('getStatusBarHeight', _getStatusBarHeight);
    //  android  请求权限询问
    Invoke.define('askPermission', askPermission);

    // 选择相册
    Invoke.define('openPicker', _openPicker);
    // 拍照
    Invoke.define('openCamera', _openCamera);

    // 退出App
    Invoke.define('exitApp', _exitApp);
    // 重载
    Invoke.define('reload', _reload);
    // 定位
    Invoke.define('getLocation', getLocation);
 

},[]);

useEffect(()=>{  // 监听 (键盘 | 物理返回 | AppState | 推送监听)

    const keyboardDidShow = Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    const keyboardDidHide = Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    const backHander = BackHandler.addEventListener('hardwareBackPress', _onBackHander);

    AppState.addEventListener('change', _onAppState);

    JPush.addNotificationListener(res => {
        let {url} = res.extras || {url: null},
          type = res.notificationEventType;
        if (type == 'notificationOpened' && url) {
          let json = JSON.stringify({url: url});
          const js = ` window.recievedPushMessage && window.recievedPushMessage(${json})`;
          webviewRef.current?.injectJavaScript(js);
        }
    });

    return () => {
        keyboardDidShow.remove();
        keyboardDidHide.remove();

        backHander.remove();

        AppState.removeEventListener('change', _onAppState);
        JPush.removeListener(()=>{});
    };
},[]);
useFocusEffect(useCallback(()=>{
    if(!isFocused){
        const js = ` window.screenIsFocused && window.screenIsFocused()`;
        webviewRef.current?.injectJavaScript(js);
    }
    
},[isFocused]))
let _webviewUrl: string = state?.webviewUrl || ''
_webviewUrl = _testwebviewUrl;
return(
    <View
        style={ styles.container }
    >
        { _PLATFROM == 'android' ?  <StatusBar  translucent={true} backgroundColor={'rgba(255,255,255,0)'} /> : null }
        <WebView
            ref={ webviewRef }
            style={{flex: 1}}
            sharedCookiesEnabled={true}
            useSharedProcessPool={true}
            source={{uri: props.route.params?.url || _webviewUrl }}  
            onLoadEnd={() => {}}
            mixedContentMode={'always'} // compatibility
            startInLoadingState={true}
            textZoom={100}
            allowsInlineMediaPlayback={true}
            scrollEnabled={ props.route.params?.scrollEnabled || false }
            onMessage={ Invoke.listener }
            renderError={()=>(
                <LoadError setBarStyle={ _setBarStyle } reload={ _reload }/>
            )}
        />   
    </View>
    
)

let _refWebview = React.useRef()
let invoke = createInvoke(() => _refWebview.current)

React.useEffect(() => {
    // 暴露方法给 H5
  invoke.define('route', setRoute)
    return () => {}
  }, [])

return (
<WebView
          useWebKit
          ref={_refWebview}
          style={{ flex: 1 }}
          source={{ uri: config.h5 + route.params.uri, headers: { 'Cache-Control': 'no-cache' } }}
          automaticallyAdjustContentInsets={true}
          decelerationRate="normal"
          scrollEnabled={true}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          onMessage={invoke.listener}
          nativeConfig={{ props: { flex: 1 } }}
          onLoad={syntheticEvent => {
            const { nativeEvent } = syntheticEvent
            console.log(`nativeEvent.url: ${nativeEvent.url}`)
          }}
          onLoadProgress={({ nativeEvent }) => {
            console.log(`nativeEvent.progress: ${nativeEvent.progress}`)
          }}
          onLoadStart={syntheticEvent => {
            // update component to be aware of loading status
            const { nativeEvent } = syntheticEvent
            console.log(`onLoadStart nativeEvent.loading: ${nativeEvent.loading}`)
          }}
          onLoadEnd={syntheticEvent => {
            // update component to be aware of loading status
            const { nativeEvent } = syntheticEvent
            console.log(`onLoadEnd nativeEvent.loading: ${nativeEvent.loading}`)
          }}
          onError={syntheticEvent => {
            const { nativeEvent } = syntheticEvent
            console.warn('WebView error: ', nativeEvent)
          }}
          onHttpError={syntheticEvent => {
            const { nativeEvent } = syntheticEvent
            console.warn(
              'onHttpError WebView received error status code: ',
              nativeEvent.statusCode
            )
          }}
          originWhitelist={['*']}
          allowFileAccessFromFileURLs={true}
          allowFileAccess={true}
          allowUniversalAccessFromFileURLs={true}
          allowingReadAccessToURL={'file://'}
        />
)

this.Native.define('myFunc', this.myFunc)

  myFunc() {
    console.log(this)
    // can't access to this component
  }