前端常见问题汇总 (app)

1. react-native  JSON value '<null>'

报此错误是因为后端返回的值带有null，然后将null直接渲染在rn组件中会报此错 。

解决方法是 在渲染时比如 <Text>{value}<Text>  改成 <Text>{value || ''}</Text>

2. IOS圆角需要加上overflow:'hidden'

3. 安卓运行闪退，日志报 Android java.lang.UnsatisfiedLinkError: couldn't find DSO to load。  

   在 android/app/buid.gradle 中添加

  configurations.all {
    resolutionStrategy {
        force "com.facebook.soloader:soloader:0.8.2"
    }
}

android {
  ...
  // add the following packagingOptions 
  packagingOptions {
    pickFirst 'lib/x86_64/libjsc.so'
    pickFirst 'lib/arm64-v8a/libjsc.so'
  }
}

在 defaultConfig 属性中添加 

ndk {
  abiFilters 'armeabi-v7a', 'x86'
}

原地址在 https://stackoverflow.com/questions/61544046/android-java-lang-unsatisfiedlinkerror-couldnt-find-dso-to-load

4. mac 上完整删除android studio 

第一步

rm -Rf /Applications/Android\ Studio.app
rm -Rf ~/Library/Preferences/AndroidStudio*
rm ~/Library/Preferences/com.google.android.studio.plist
rm -Rf ~/Library/Application\ Support/AndroidStudio*
rm -Rf ~/Library/Logs/AndroidStudio*
rm -Rf ~/Library/Caches/AndroidStudio*

第二步

rm -Rf ~/AndroidStudioProjects

第三步

rm -Rf ~/.gradle

1. 第四步

2. rm -Rf ~/.android

3. 第五步

4. rm -Rf ~/Library/Android*

5. RN 0.62版本 IOS TextInput 文字颤抖。  这是这个版本的bug。 是因为设置了fontSize。 
解决办法有这几种: 
1. RN版本降级或者升级，issue里面有一个提交是解决这个问题的  
2. 删除fontSize也可以解决，但是字体就默认大小
3. 给TextInput加上multiple属性，变成多选框可以解决。 

6. RN 0.62版本 ios14系统本地图片访问不了。 这个需要修改node_modules

路径react-native/Libraries/Image/RCTUIImageViewAnimated.m下
if(_currentFrame) { layer.contentsScale= self.animatedImageScale; layer.contents= (__bridgeid)_currentFrame.CGImage; }
修改成：
if(_currentFrame) { layer.contentsScale= self.animatedImageScale; layer.contents= (__bridgeid)_currentFrame.CGImage; }else{ [super displayLayer:layer]; }

 https://github.com/facebook/react-native/issues/29279

7. rn 0.63版本 上传图片爆Missing request token for request  NSURLRequest

A quick solution is to revert this commit: https://github.com/facebook/react-native/commit/31980094107ed37f8de70972dbcc319cc9a26339#diff-9a034658197479288c4d346a0eb4d98c

After manually revert this commit in node_modules, recompile the app and the image uploading will be working without any issues.

Replace the function loadImageForURL in /Libraries/Image/RCTLocalAssetImageLoader.mm with the following:

 - (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                           size:(CGSize)size
                                          scale:(CGFloat)scale
                                     resizeMode:(RCTResizeMode)resizeMode
                                progressHandler:(RCTImageLoaderProgressBlock)progressHandler
                             partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                              completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
   __block auto cancelled = std::make_shared<std::atomic<bool>>(false);
   RCTExecuteOnMainQueue(^{
     if (cancelled->load()) {
       return;
     }

     UIImage *image = RCTImageFromLocalAssetURL(imageURL);
     if (image) {
       if (progressHandler) {
         progressHandler(1, 1);
       }
       completionHandler(nil, image);
     } else {
       NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
       RCTLogWarn(@"%@", message);
       completionHandler(RCTErrorWithMessage(message), nil);
     }
   });

   return ^{
     cancelled->store(true);
   };
 }

8. rn调用安卓权限封装方法 (如 @react-native-community/cameraroll 保存图片)

    <!--  选择文件权限  -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

static checkAndroidPermission = async (key) => {
        const permission = PermissionsAndroid.PERMISSIONS[key];
        const hasPermission = await PermissionsAndroid.check(permission);
        if (hasPermission) {
            return true;
        }
        const status = await PermissionsAndroid.request(permission);
        return status === 'granted';
    }

9. 华为手机上对于图片使用overflow: 'hidden'会导致头部闪动

10. gradle 下载地址 https://services.gradle.org/distributions/