RN嵌入H5开发遇坑总结(持续更新中)

394 阅读1分钟

1.StatusBar在键盘开启关闭后消失

解决方案:添加键盘事件监听,关闭后再次唤起StatusBar的样式

Keyboard.addListener("keyboardDidHide", () => {
  if (Platform.OS === "ios") {
    StatusBar.setHidden(false);
  }
});

2.安卓左滑手势使用Stack.Navigator中的 gestureEnabled: false 属性设置无法禁用

使用navigation.addListener 针对beforeRemove事件进行监听,然后再针对进行左滑事件处理

React.useEffect(
    () =>
      navigation.addListener("beforeRemove", (e) => {
        const action = e.data.action;
        e.preventDefault();
        console.log("closePage", closePage);
        if (!closePage.current) {
          setModalVisible(true);
          setAction(action);
        } else {
          navigation.dispatch(action);
        }
      }),
    [navigation]
  );

3.华为手机RN开发 StatusBar 不显示

在 RN 层通过 StatusBar 组件设置状态栏的颜色、半透明,但是在华为手机中一直不生效,只能直接去安卓代码部分将 Android 的状态栏设置为全屏且状态栏透明,这样 Android 的表现就和 iOS 一样,再做处理 在 MainActivity.java 中添加下面的代码,可以设置全屏且状态栏透明:

import android.os.Build;
import android.graphics.Color;
import android.view.View;
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }

    }

4.RN加载WebView之后StatusBar设置的状态就无效了

初始状态下是好的,但是Webview的内容加载之后,StatusBar的状态又会再次退回到系统默认状态,因此需要在webview加载完毕之后再次进行StatusBar样式的处理

 const handleWebViewLoad = () => {
    StatusBar.setBarStyle("light-content"); // 设置为浅色状态栏样式
  };
  const handleWebViewLoadEnd = () => {
    StatusBar.setBarStyle("light-content");
  };
  const 
<WebView
    onLoad={handleWebViewLoad}
    onLoadEnd={handleWebViewLoadEnd}
  />