Question

我遇到有关onLayout事件的问题

代码

<View>
  <Text>
    <Text onLayout={e => {console.log("this isn't triggered!")}}>{"foo"}</Text>
  </Text>
</View>

B代码

<View>
  <Text onLayout={e => {console.log("here the event it is called, but I need call in a SubText")}}>{"foo"}</Text>
</View>

Answer 1

我在RN回购中发现了以下相关错误：https://github.com/facebook/react-native/issues/11650。仍在寻找一种测量嵌套文本的方法

Answer 2

这是后代的答案。在找到答案之前，我在这里进行了滚动浏览，因此这可能会对其他人有所帮助。

就我而言，我需要在滚动视图中显示属性文本，并能够滚动到文本中的不同子字符串。

Nesting texts within texts creates a single NSAttributedString behind the scenes on iOS and a SpannableString on Android，因此尝试将onLayout属性添加到嵌套文本元素实际上没有任何效果，因为在生成的DOM中，它实际上并未表示为自己的文本元素。

对于我来说，解决方法是use the onTextLayout prop of the Text component：

import React from "react"
import { StyleSheet, ScrollView, Text, View } from "react-native"

const App = () => {
  const scrollViewRef = React.useRef<ScrollView>(null)

  const onTextLayout = React.useCallback(event => {
    const scrollLocation = event.nativeEvent.lines.find(
      line => line.text === "6. Hello\n",
    ).y
    if (scrollViewRef.current) {
      scrollViewRef.current.scrollTo({
        x: 0,
        y: scrollLocation,
        animated: true,
      })
    }
  }, [])

  return (
    <View style={styles.container}>
      <View style={{ height: 100 }}>
        <ScrollView
          ref={scrollViewRef}
          style={{
            width: 100,
            height: 100,
            borderColor: "#000",
            borderWidth: 1,
          }}
        >
          <Text onTextLayout={onTextLayout}>
            <Text>1. Hello{"\n"}</Text>
            <Text>2. Hello{"\n"}</Text>
            <Text>3. Hello{"\n"}</Text>
            <Text>4. Hello{"\n"}</Text>
            <Text>5. Hello{"\n"}</Text>
            <Text>6. Hello{"\n"}</Text>
            <Text>7. Hello{"\n"}</Text>
            <Text>8. Hello{"\n"}</Text>
            <Text>9. Hello{"\n"}</Text>
            <Text>10. Hello{"\n"}</Text>
            <Text>10. Hello{"\n"}</Text>
            <Text>10. Hello{"\n"}</Text>
            <Text>10. Hello{"\n"}</Text>
          </Text>
        </ScrollView>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
})

export default App

请注意，在使用onTextLayout=道具的那行上，我收到Typescript错误。谷歌搜索解决方案并没有发现任何问题，但是prop函数被调用了！

为什么onLayout不会在SubText中触发？

2 个答案: