使用react-qty-picker的QuantityPicker组件时抛出渲染错误求助

错误原因 #

1. React Native的核心规则：所有文本内容必须包裹在<Text>组件内，react-qty-picker的QuantityPicker组件若内部出现未被<Text>包裹的文本渲染，就会触发该错误。
2. 代码属性名错误：你将组件的回调属性写成了onpress，但React Native事件属性遵循驼峰命名规范，正确名称应为onPress，这个错误会导致组件内部逻辑异常，进而触发文本渲染问题。

解决方案 #

1. 修正回调属性名 #

把onpress改为onPress，确保组件能正确绑定回调函数，避免内部逻辑出错。

2. 修改后的完整代码 #

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { QuantityPicker } from 'react-qty-picker';

export default function TaskView()  {
    const getPickerValue = (value) => {
        console.log(value) // 获取数量选择器的值
    }
    return (
        <View style={styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <View>
                <QuantityPicker smooth value={0} onPress={getPickerValue}/>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
})

3. 额外排查点 #

如果修正属性名后错误仍存在，检查是否在自定义QuantityPicker的按钮文本或数值显示时，直接传入了字符串而未用<Text>组件包裹。若组件支持自定义内容，确保所有文本都被<Text>包裹。

内容的提问来源于stack exchange，提问作者Thanh Trần