React Native iOS 固定宽度文本更新时新旧值重叠闪烁问题求助

大家好，我刚接触React Native（用的是0.79.2版本），最近碰到一个特别奇怪的问题，折腾我好一阵了。

问题是这样的：当我更新一个固定宽度的文本内容时，新旧两个值会短暂地重叠显示在屏幕上，大概持续几帧，肉眼能明显看到这个“过渡”效果。而且这个问题是偶发的，不是每次状态更新都会出现。全程我的设备FPS都是60，没看到明显的帧丢失，但就是会出现这个重叠闪烁的情况。

更奇怪的是，这个问题只在真实iOS设备上出现（我测试用的是iPhone 14 Pro，系统iOS 18.4.1），React Native模拟器和我试过的安卓设备都完全正常。

这个问题用普通屏幕录制很难抓下来，我特意用慢动作录了视频，截了几帧：

• Frame #0:
• Frame #1:
• Frame #2:
• Frame #3:
• Frame #4:

下面是我用到的测试代码：

export default function HomeScreen() {
  const [n, setN] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      if (!running) {
        return;
      }
      setN((prev) => (prev === 7 ? 8 : 7));
    }, 1000);
    return () => clearInterval(interval);
  }, [running]);

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
      headerImage={
        <Image
          source={require("@/assets/images/partial-react-logo.png")}
          style={styles.reactLogo}
        />
      }
    >
      <Pressable onPress={() => setRunning((prev) => !prev)}>
        <ThemedView style={styles.stepContainer}>
          <Text style={styles.numeric}>000{n}</Text>
        </ThemedView>
      </Pressable>
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  numeric: {
    fontSize: 100,
    fontWeight: "bold",
    fontVariant: ["tabular-nums"],
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
    backgroundColor: "white",
    padding: 16,
    alignItems: "center",
  },
});

我已经尝试用fontVariant: ["tabular-nums"]来确保每个数字的宽度一致，避免因为字符宽度变化导致的布局偏移，但这个重叠问题还是存在。有没有朋友遇到过类似的iOS渲染问题？或者能帮我分析下这可能是RN的底层渲染bug，还是我代码里有什么没注意到的地方？

内容来源于stack exchange