返回react-native中函数的UI组件

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>