ReactNative开发笔记（持续更新...）

本文均为RN开发过程中遇到的问题、坑点的分析及解决方案，各问题点之间无关联，希望能帮助读者少走弯路，持续更新中… （2022年11月8日更新）

原文链接：http://www.kovli.com/2018/06/25/rn-anything/

作者:Kovli

- yarn 操作时遇到Integrity check failed for ...(computed integrity doesn't match our records, got "sha512-... sha1-..."问题

报错信息

error https://registry.npm.taobao.org/uglify-es/download/uglify-es-3.3.10.tgz: Integrity check failed for "uglify-es" (computed integrity doesn't match our records, got "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ== sha1-DBxPBwC+2NvBJM2zBNJZLKID5nc=")
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.

网上试了各种清缓存方法无效，如果删除lockfile是可以成功，但是会重新生成lockfile，里面的版本号有些会更新，不符合之前锁版本的预期，想要保留locakfile，接下来的才是适合国情的全网最正确解决方案！
解决方案：

yarn config set registry https://registry.yarnpkg.com
yarn --update-checksums
yarn config set registry https://registry.npm.taobao.org

- React Native的View自适应内部文本Text宽度

加View的style 增加一个 alignSelf
解决方案：

alignSelf: 'flex-start/center/flex-end...',

- iOS pod intall 报错CDN: trunk Repo update failed的解决方案

报错信息

[!] CDN: trunk Repo update failed - 24 error(s):
CDN: trunk URL couldn't be downloaded: https://cdn.jsdelivr.net/cocoa/Specs/3/2/5/FlipperKit/0.128.0/FlipperKit.podspec.json Response: SSL connect error`

解决方案：

pod repo remove trunk
pod install

- iOS真机联调红屏报错Error: EISDIR: illegal operation on a directory的解决方案

报错信息

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:568:3)
    at tryReadSync (fs.js:353:20)
    at Object.readFileSync (fs.js:390:19)

• 临时解决方案：摇一摇iPhone，弹出debug菜单，倒数第二项点进去，分别输入PC端ip地址，8081，index，然后再reload就可以了
• 问题根源在debug模式没有找到index bundle文件，检查iOS原生部分jsCodeLocation的获取是否有问题，例如下面的获取方式里index是否写成了index.ios的老版本写法

        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

- RN的层叠关系中，一个滑动View的zIndex设置为2，当滑动到其父View的兄弟View时，iOS的子View会被盖住，安卓正常的解决方案

在叠层关系中，子View的zIndex不能高于父View的zIndex，故而导致子View了zIndex设置无效；
解决方法：

提升该View的父View的zIndex 为2，再提升子View的zIndex才可生效；

PS:要zIndex生效，还要设置子view的position的位置。

- react-native-scrollable-tab-view的goToPage方法在安卓端出现先返回第一页再跳转到指定页的闪烁问题的解决方案

解决方案：
1、<ScrollAbleView增加 prerenderingSiblingsNumber = {Infinity}
Infinity可修改为所需的数字
prerenderingSiblingsNumber (Integer) - pre-render nearby # sibling, Infinity === render all the siblings, default to 0 === render current page.

2、跳转增加setTimeOut，否则就停在第一页不跳了

        setTimeout(() => {
            this.goToPage(1);
        }, 0);

- react-native-webview 使用injectedJavaScript方法注入网页js代码时的坑点：

1、获取dom元素当document.getElementById('loginId').value = "test-mobile"失效时采用这种方式获取：

const input = document.querySelector('#loginId');
Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
            .set.call(input, storage["loginId"] || "");

2、安卓有效，iOS的injectedJavaScript不生效的解决方案：
增加onMessage

injectedJavaScript={jsCode}
onMessage={(event) => {}}

3、安卓有效，iOS的document.getElementById和Object.getOwnPropertyDescriptor均无效的解决方案：

Fixed using a timer.

const jsCode = `
    setTimeout(() => {
        document.getElementById("name").value = "${name}"; 
        document.f1.submit(); 
    }, 100);
`;

解决方案参考地址：https://github.com/react-native-webview/react-native-webview/issues/341

完整案例:

        let jsCode = `
        // document.getElementById('loginId').value = "test-mobile";
        // document.getElementById('password').value = "test123";
        var storage=window.localStorage;
        if(storage){
          setTimeout(() => {
           const input = document.querySelector('#loginId');
           const pwd = document.querySelector('#password');
           Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
            .set.call(input, storage["loginId"] || "");
           if (storage["password"]) {
             Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
              .set.call(pwd, window.atob(storage["password"]) || "");
           }
           input.dispatchEvent(new Event('change', { bubbles: true }));
           pwd.dispatchEvent(new Event('change', { bubbles: true }));
           document.querySelector('#loginBtn').onclick = function(){
            if (document.getElementById('loginId').value && document.getElementById('password').value) {
                  //写入loginId字段
                  storage["loginId"]=document.getElementById('loginId').value;
                  //写入password字段
                  storage.password=window.btoa(document.getElementById('password').value);
             }
           };
          }, 100);
        }
         `;
        let isSomePage = false
        return (
            <WebView
                ref={webview => {
                    this.webview = webview;
                }}
                style={
  {
                    backgroundColor: UIConstant.Common_Color_Background,
                }}
                source={
  {uri: this.props.url}}
                injectedJavaScript={jsCode}
                onMessage={(event) => {}}
                // thirdPartyCookiesEnabled={true}
                // domStorageEnabled={true}
                // allowFileAccess={true}
                // cacheEnabled={true}
                // sharedCookiesEnabled={true}
                // sharedCookiesEnabled={true}