expo 如何实现 scrollView 滚动时显示当前行高亮

可以使用 `onScroll` 和 `onLayout` 属性来实现。具体步骤如下：

1. 在 `ScrollView` 组件中添加 `onScroll` 属性，监听滚动事件。

2. 在每行文本组件中添加 `onLayout` 属性，监听组件布局事件，获取当前行的位置信息。

3. 在 `onScroll` 回调中，通过 `nativeEvent.contentOffset.y` 获取当前滚动的垂直位置。

4. 遍历所有行文本组件，计算每行的位置信息，判断当前滚动位置处于哪一行，设置该行高亮样式。

示例代码如下：

import React, { useState } from 'react';
import { ScrollView, Text, View } from 'react-native';

const LineText = ({ text }) => {
  const [isHighlight, setIsHighlight] = useState(false);
  const [lineLayout, setLineLayout] = useState({});

  const handleLayout = event => {
    setLineLayout(event.nativeEvent.layout);
  };

  return (
    <Text
      onLayout={handleLayout}
      style={{ backgroundColor: isHighlight ? 'yellow' : 'transparent' }}
      onPress={() => setIsHighlight(!isHighlight)}
    >
      {text}
    </Text>
  );
};

const HighlightScrollView = ({ texts }) => {
  const [highlightIndex, setHighlightIndex] = useState(0);

  const handleScroll = event => {
    const scrollY = event.nativeEvent.contentOffset.y;
    let index = 0;
    let minDistance = Number.MAX_SAFE_INTEGER;

    texts.forEach((text, i) => {
      const distance = Math.abs(lineLayouts[i].y - scrollY);
      if (distance < minDistance) {
        minDistance = distance;
        index = i;
      }
    });

    setHighlightIndex(index);
  };

  const lineLayouts = texts.map(() => ({}));
  const handleLineLayout = index => event => {
    lineLayouts[index] = event.nativeEvent.layout;
  };

  return (
    <ScrollView onScroll={handleScroll}>
      {texts.map((text, i) => (
        <View key={i} onLayout={handleLineLayout(i)}>
          <LineText text={text} isHighlight={i === highlightIndex} />
        </View>
      ))}
    </ScrollView>
  );
};

export default HighlightScrollView;

在上面的代码中，`LineText` 组件代表每一行文本，`HighlightScrollView` 组件代表高亮滚动视图。`LineText` 组件中通过 `onLayout` 获取每一行的位置信息，通过 `isHighlight` 属性设置该行是否高亮。`HighlightScrollView` 组件中通过 `onScroll` 监听滚动事件，通过遍历所有行文本组件计算出当前滚动位置处于哪一行，设置该行高亮样式。