React 本机问题：文本字符串必须在 <Text> 组件

Question

在我的反应本机应用程序中，我收到以下错误：文本字符串必须使用文本标签呈现，错误在这一行：

{ root.userStore.work && root.userStore.work != '' && (
                <Text allowFontScaling={false} style={{ paddingTop:10,paddingHorizontal:0, color:'rgb(125,125,125)', position:'relative',fontSize:14,fontFamily:'IBMPlexSans-Regular' ,marginBottom:0,alignSelf:'flex-start' }}>{ t('currentCharacters', { characters : calculateWorkRemainingCharacters(root.userStore.work.length)} ) }</Text>

calculateWorkRemainingCharacters 函数如下所示：

const calculateWorkRemainingCharacters = (currentLength ) => {
        let maxLength = 20;
        return maxLength - currentLength;
    }

Answer 1

你的代码的问题就出在这里

{ root.userStore.work && root.userStore.work != '' && (
  ^^^^^^^^^^^^^^^^^^^ here
  ....

您的

root.userStore.work

不一定会解析为布尔结果。因此，它将在react组件树中返回，并且react-native将尝试渲染它。但这些数据类型不允许显示在

Text

组件之外。

解决方案1：

{ !!root.userStore.work && root.userStore.work != '' && (
//^^ changed here
<Text allowFontScaling={false} style={{ paddingTop:10,paddingHorizontal:0, color:'rgb(125,125,125)', position:'relative',fontSize:14,fontFamily:'IBMPlexSans-Regular' ,marginBottom:0,alignSelf:'flex-start' }}>{ t('currentCharacters', { characters : calculateWorkRemainingCharacters(root.userStore.work.length)} ) }</Text>}

解决方案2：

{ root.userStore.work && root.userStore.work != '' ? (
//                                                 ^ made it ternary
                <Text allowFontScaling={false} style={{ paddingTop:10,paddingHorizontal:0, color:'rgb(125,125,125)', position:'relative',fontSize:14,fontFamily:'IBMPlexSans-Regular' ,marginBottom:0,alignSelf:'flex-start' }}>{ t('currentCharacters', { characters : calculateWorkRemainingCharacters(root.userStore.work.length)} ) }</Text> : null}