HarmonyOS鸿蒙Next中RN ScrollView scrollTo Crash问题

HarmonyOS鸿蒙Next中RN ScrollView scrollTo Crash问题

环境:

sdk:beta3 rnoh-react-native-harmony-0.72.28
rnoh:react_native_openharmony-5.0.0.490

在rn里使用ScrollView组件，如下使用方式:

<ScrollView ref={flatListL1} style={styles.firstFlatList} showsVerticalScrollIndicator={false} onLayout={() => { 
  if (!hasL1OnLayouted.current) { 
    hasL1OnLayouted.current = true 
    const idx = Math.max(allData.data.l1.findIndex(item => item.id === allData.selected.item1?.id), 0)
    console.log('idx1', idx, flatListL1?.current)
    flatListL1?.current.scrollTo({ 
      x: 0, 
      y: pxToDp(96) * idx, 
      animated: false 
    })
  }
}}>
</ScrollView>

当调用flatListL1?.current.scrollTo时，稳定crash，从日志看应该是c++ 空指针了，日志如下:

Reason:Signal:SIGSEGV(SEGV_MAPERR)@0x0000000000000020  
probably caused by NULL pointer dereference  
Fault thread info: Tid:60760, Name:com.xxx.xxx 
#00 pc 00000000000fea14 /data/storage/el1/bundle/libs/arm64/libreact_render_core.so(std::__n1::weak_ptr<facebook::react::EventDispatcher const>::lock() const+68)(ea6964530684c90458078758b18e2c90965152df) 
#01 pc 00000000000fe684 /data/storage/el1/bundle/libs/arm64/libreact_render_core.so(facebook::react::EventEmitter::dispatchUniqueEvent(std::__n1::basic_string<char, std::__n1::char_traits<char>, std::__n1::allocator<char>>, std::__n1::function<facebook::jsi::Value (facebook::jsi::Runtime&)>) const+84)(ea6964530684c90458078758b18e2c90965152df) 
#02 pc 00000000000bc328 /data/storage/el1/bundle/libs/arm64/librrc_scrollview.so(facebook::react::ScrollViewEventEmitter::onScroll(facebook::react::ScrollViewMetrics const&) const+108)(9b2aa5e6325ef98f8d2153472cc30f7b0f0eaafa) 
#03 pc 00000000008a3d1c /data/storage/el1/bundle/libs/arm64/librnoh.so(rnoh::ScrollViewComponentInstance::onScroll()+1012)(97cd6d0faea82ca9df548a9e79887a33076b515d) 
#04 pc 0000000000847a54 /data/storage/el1/bundle/libs/arm64/librnoh.so(rnoh::ScrollNode::onNodeEvent(ArkUI_NodeEventType, ArkUI_NumberValue (&)[12])+100)(97cd6d0faea82ca9df548a9e79887a33076b515d) 
#05 pc 0000000000838ce4 /data/storage/el1/bundle/libs/arm64/librnoh.so(rnoh::ArkUINodeRegistry::receiveEvent(ArkUI_NodeEvent*)+956)(97cd6d0faea82ca9df548a9e79887a33076b515d) 
#06 pc 0000000000838eb4 /data/storage/el1/bundle/libs/arm64/librnoh.so(97cd6d0faea82ca9df548a9e79887a33076b515d) 
#07 pc 0000000000838e88 /data/storage/el1/bundle/libs/arm64/librnoh.so(97cd6d0faea82ca9df548a9e79887a33076b515d)

有人遇到过吗？


更多关于HarmonyOS鸿蒙Next中RN ScrollView scrollTo Crash问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

试试这个

import React, { useRef } from 'react';
import {
  StyleSheet,
  Text,
  SafeAreaView,
  ScrollView,
  StatusBar,
} from 'react-native';
const App = () => {
  const flatListL1 = useRef(null)
  const A=()=>{
    if(flatListL1.current){
      flatListL1.current.scrollTo({ x: 0, y: 96, animated: false })
      console.info('触发滚动')
    }
  }
  return (
    <SafeAreaView>
      <ScrollView 
      style={styles.scrollView} 
      ref={flatListL1}
      onLayout={()=>{
          A()
      }} >
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});
export default App;

更多关于HarmonyOS鸿蒙Next中RN ScrollView scrollTo Crash问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，RN ScrollView的scrollTo方法出现崩溃问题，可能是由于以下原因导致：

  1. 参数越界：scrollTo方法的参数（如x、y）超出了ScrollView的有效范围，导致系统无法正确处理，从而引发崩溃。

  2. 异步调用问题：scrollTo方法可能在某些异步操作中调用，导致状态不一致或资源未正确初始化，从而触发崩溃。

  3. 组件生命周期问题：在ScrollView组件的生命周期中，scrollTo方法可能在组件未完全挂载或已经卸载时被调用，导致空指针或无效状态。

  4. 线程安全问题：scrollTo方法可能在非UI线程中调用，导致UI更新异常，进而引发崩溃。

  5. 系统兼容性问题：鸿蒙Next系统版本与RN ScrollView组件之间存在兼容性问题，导致scrollTo方法在某些特定场景下无法正常工作。

解决方法包括：

  • 确保scrollTo方法的参数在有效范围内。
  • 检查scrollTo方法的调用时机，确保在组件生命周期内调用。
  • 确保scrollTo方法在UI线程中调用。
  • 更新RN ScrollView组件或鸿蒙Next系统至最新版本，以解决可能的兼容性问题。

具体修复方案需根据实际代码和日志进行分析。

在HarmonyOS鸿蒙Next中，React Native的ScrollView组件使用scrollTo方法时可能会遇到Crash问题。这通常是由于JS与原生通信时参数传递错误或组件未正确初始化导致的。建议检查scrollTo方法的参数是否正确，确保x和y坐标在有效范围内，并确认ScrollView组件已正确挂载。此外，更新到最新的React Native版本或查阅相关社区讨论也可能找到解决方案。

回到顶部