Return UI 来自 react-native 函数的组件

Question

以下代码运行良好

<View>
    <ViewShot ref={viewShotRef}>
            <Grayscale >
                <Image style={styles.imgstyle}
                    source={{ uri: sourceImage, }}
                    onLoadEnd={onImageLoaded}
                />
            </Grayscale>
    </ViewShot>
</View>

我试图在函数中渲染一些 UI

const renderFilter = () => {
return(
 <Grayscale >
                <Image style={styles.imgstyle}
                    source={{ uri: sourceImage, }}
                    onLoadEnd={onImageLoaded}
                />
  </Grayscale>
)
}

<View>
    <ViewShot ref={viewShotRef}>
            renderFilter()
    </ViewShot>
</View>

但是我得到一个错误。不确定错误的确切来源。

Error: Text strings must be rendered within a <Text> component.

Answer 1

如果不使用花括号，则无法在 JSX 块中调用函数。以下内容将解决您的问题。

<View>
    <ViewShot ref={viewShotRef}>
      {renderFilter()}
    </ViewShot>
</View>

Return UI 来自 react-native 函数的组件

Return UI components from functions in react-native

react-native