react native不正经问题大全,间歇性更新

1.react native secureTextEntry not working on android

TextInput组件在同时设置secureTextEntry和keyboardType属性的时候,会使得secureTextEntry属性失效,密文无效果。

解决方法:

设置 autoCapitalize={'none'}

参考:stackoverflow.com/questions/5…

2.Xcode12.5 报错:Flipper-Folly/folly/synchronization/DistributedMutex-inl.h:1051:5: 'atomic_notify_one' is unavailable

解决办法:

atomic_notify_one前添加folly::

图片1.png

3.RN + Xcode12 + iOS14 本地图片加载不出解决方案

解决方案:

Xcode快捷键 command+shift+O 搜索 RCTUIImageViewAnimated 在RCTUIImageViewAnimated.m 找到 267行 修改如下方法即可:

- (void)displayLayer:(CALayer *)layer{
      if (_currentFrame) {
        layer.contentsScale = self.animatedImageScale;
        layer.contents = (__bridge id)_currentFrame.CGImage;
      }
  }

修改为:

- (void)displayLayer:(CALayer *)layer{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
}

4.ScrollView当前焦点项自动滚动到屏幕内,或者相关自动滚动问题通用方案

const handle = findNodeHandle(this.view);
UIManager.measure(handle,(x,y,width,height,pageX,pageY) => {
    //x、y:为视图的相对位置。width、height:为视图的宽度和高度。pageX、pageY为视图在屏幕上的绝对位置
});

通过如上代码可以获取到pageY,如果父布局是scollview,需要拿到scrollview当前滚动的Y值:

e.nativeEvent.contentOffset.y;//垂直滚动距离

然后二者相加,得到的才是实际需要滚动的距离(可能会根据scrollview的margin等进行响应调整,但是这个实际滚动的距离是可信任的),然后调用ScrollView的scrollTo方法进行相关滚动即可,伪代码类似:

var realY= pageY+scrollPageY;
var valueY = 0;
if(Math.abs(realY)-222 > 0){
    valueY = Math.abs(realY)-222;
}else{
    valueY = 0;
}
//在屏幕内不处理
if(pageY >0 && pageY < this.props.height){
    return;
}
//尽可能的居中显示,如果需要可以进行相关处理
if(valueY-offsetCenterValue > 0){
    valueY = valueY-offsetCenterValue;
}
this.refs.scrollView.scrollTo({x:0,y:valueY,animated:true});

5.ios部分如果出现问题,终极解决办法:

删除pods,Podfile.lock,gslMediator.xcworkspace,然后进入ios目录,执行pod install

6.打包时,如果新修改代码无法生效,可以重新生成bundle包,再编译android和ios包

android生成bundle包命令:

react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

ios生成bundle包命令:

node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js  --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle

所以可以直接在package.json的scripts标签下新增:

"scripts": {
    "GetuiConfigure": "node node_modules/react-native-getui/GetuiConfiguration.js",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js  --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle",
    "bundle-android": "react-native bundle --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res --dev false"
  },

然后需要重新生成bundle包的时候,直接yarn/npm bundle-android/bundle-ios即可;

7.查看React Native使用的okhttp库的版本以及存在多版本okhttp库时的选择

查看三方库引用tree,各种库的依赖关系:

首先使用Android studio打开React native android项目,然后等编译完成后,在Android studio的右侧边栏点击ModuleName -> Tasks -> help -> dependencies(双击),如下:

image.png

然后等待命令执行完成,就会看到如下三方库依赖信息:

image.png

可以看到每个使用的库,引用的其他库,通过筛查就可以看到:

+--- com.squareup.okhttp3:okhttp:3.12.1 -> 5.0.0-alpha.2 (*)

这就是当前RN版本使用的okhttp版本为3.12.1,我这边使用的RN版本是0.62.2,至于后面为何会有箭头指向5.0.0-alpha.2,目前猜测是当前项目中存在高版本的okhttp,指向的就是当前项目中最高版本的okhttp。

如果上述猜测属实,那么我们如果想提高okhttp的版本,就可以主动新增高版本的okhttp库,这样rn在编译运行的时候就会去寻找高版本的库,如果没有则使用内置的版本。

8.java.lang.NoSuchMethodError: No virtual method toString(Z)Ljava/lang/String

类似这种错误,是okhttp版本不一致的问题;

image.png

解决方案:

dependencies {
     compile "com.squareup.okhttp3:okhttp:4.2.1"
     compile "com.squareup.okhttp3:logging-interceptor:4.2.1"
     compile "com.squareup.okhttp3:okhttp-urlconnection:4.2.1"
}

参考链接

9.code-push库引入android出错,把相关代码移动到settings.gradle的底部即可

cl FAMCrmetPrefectaareiecepire aonode eodaleare sctpetie.png

10.ios pod install遇到glog问题时

Pasted Graphic 2.png

install相关的,条件允许可以开启科学上网,切换不同结点尝试

11.Android build fails since 0.71.0-rc.0 tag added

这个奇葩问题是android build.gradle中使用的是react-native版本没有指定具体的版本号,使用的+号,导致和rn指定的版本号不一致,改为一致后可解决部分问题,但是依然会有其他问题产生,所以此处的解决方案是,强制让android使用node_modules中的react-native版本:

在android目录下的build.gradle中,添加如下代码:

allprojects {
    repositories {
       exclusiveContent {
           filter {
               includeGroup "com.facebook.react"
           }
           forRepository {
               maven {
                   url "$rootDir/../node_modules/react-native/android"
               }
           }
       }
    }
}

参考链接:# Android build fails since 0.71.0-rc.0