React Native 适配问题汇总续_scrollview.scrolltoend rn web-优快云博客

本文链接：https://blog.youkuaiyun.com/xc2430939709/article/details/75268219

本文汇总了React Native开发过程中遇到的各种典型问题及其解决方案，包括ScrollView的滚动问题、视图渲染异常、TextInput输入框特性差异等内容，对于进行跨平台移动应用开发的开发者具有较高的参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

8.低版本RN不支持ScrollView.scrollToEnd

声明Scrollview，监听取到height和contentheight

 <ScrollView
      ref={(scrollView) => { this.scrollView = scrollView; }}
      onLayout={(ev) => { this.scrollViewHeight = ev.nativeEvent.layout.height; }}
      onContentSizeChange={(w, h) => { this.contentHeight = h; }}
    >
    ...
 </ScrollView>

滚动到底部的方法

  scrollToBottom(animated = true) {
    const scrollHeight = this.contentHeight - this.scrollViewHeight;
    if (scrollHeight > 0) {
      this.scrollView.scrollTo({x: 0, y: scrollHeight, animated: animated});
    }
  }

9.iPhone plus手机在高度是基数时设置左边的上下圆角后右边会出现一个背景无法完全覆盖到的区域

10.在android上移除一个节点时,与其平级的设置了zIndex的节点也会被移除

RN官方声明该问题在 0.45 版本被修复, 但在框架升级前,没有什么最优解, 只能尽量避免在android上设置zIndex

11.iOS上ScrollView在进入二级页面再返回，ScrollView的内容向下偏移20

OS的ViewController会根据所在界面的status bar，navigationbar，与tabbar的高度，自动调整scrollview的 contentInset
设置automaticallyAdjustsScrollViewInsets为NO，不让viewController自动调整。

12.Android上超出View部分被截断问题

描述：

在一个容器包含多个子布局，若其中的一个子布局超出容器边界，在iOS上仍能正常显示，但是在android会被截断，通常需要调整子布局到容器以内

13.小米6上颜色不生效问题

在小米6上发现的适配问题，在嵌套文本中，按照下面的方式写，颜色会生效

<Text  style={styles.rankDesc}>距上榜还差
   <Text style={styles.rankColor}>12影响力</Text>
影响力</Text>

  rankDesc: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
  },
  rankColor: {
    color: '#ff7e00',
  },

如果按照这种方式，#ff7e00颜色不会生效

<Text  style={styles.rankDesc}>距上榜还差
   <Text style={{color: '#ff7e00'}}>12影响力</Text>
影响力</Text>

14.进场动画异常隐藏不了或者不显示

Native viewWillAppear与 JS componentDidMount时序不固定导致本地bundle componentDidMount 提前 hidePageLoading调用过早导致不隐藏
viewWillAppear调用过晚，在JSBundleDidLoad之后，可能框架处理的时候发选bundle已经加载完成了，就不显示loading了

15.TextInput 的value的类型不一致

android： value类型和输入类型一致，使用toString()转换，光标颜色和字体颜色一致

iOS：value类型为string，光标颜色可以修改

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

（复制/PaopaoReactNative/android/app/src/main/res 文件夹下的图片资源到 /paopao_android/paopao_android/src/main/res/drawable-xxhdpi 目录下优先拷贝最大的图片资源）

iOS打包：react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle