React Native报错：Text字符串需在<Text>组件内渲染，求排查

错误信息 #

Error: Text strings must be rendered within a component.

你的代码 #

const [childsName, setChildsName] = useState('');
const [childsNameToBeLinked, setChildsNameToBeLinked] = useState('');
const [email, setEmail] = useState('');
const [code, setCode] = useState('');
const [isParent, setParent] = useState(false);
const [isChild, setChild] = useState(false);
const [isLinked, setLinked] = useState(false);
const [allDoneForParents, setAllDoneForParents] = useState(false);
const [childsNameAddedNotif, setChildsNameAddedNotif] = useState('');
const [uri, setUri] = useState('');

return (
    <View style={styles.container}>
      {!isParent && !isChild && (
        <View>
          <View style={styles.buttonContainer}>
             <Button title="This Is Child's Phone" onPress={() => setChild(true)} />
          </View>
          <View style={styles.buttonContainer}>
            <Button title="This Is Parent's Phone" onPress={() => setParent(true)}  />
          </View>

        </View>
      )}
      {isParent && (
        <View>
          <View style={styles.inputContainer}>
            <TextInput placeholder='@' onChangeText={(val) => setEmail(val)} value={email} />
          </View>
          <View style={styles.inputContainer}>
            <TextInput placeholder='Enter Code' onChangeText={(val) => setCode(val)} value={code} />
          </View>
          {childsNameAddedNotif && (
            <View>
              <Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>
            </View>
          )}
          {!childsNameAddedNotif && (
            <View style={styles.submitBtn}>
              <Button title='Submit' onPress={handleSubmit} />
            </View>
          )}

          <View style={styles.backBtnContainer}>
            <BackBtn onPress={() => setParent(false)} />
          </View>
        </View>
      )}
      {isChild && !isLinked && !code && (
            <View>
              <View style={styles.inputContainer}>
                <TextInput placeholder="Child's First Name" onChangeText={(val) => setChildsName(val)} value={childsName} />
              </View>
              <View style={styles.submitBtn}>
                <Button title='Submit' onPress={handleSubmit} />
              </View>
              <View style={styles.backBtnContainer}>
                <BackBtn onPress={() => setChild(false)} />
              </View>
            </View>
        )}
      {isChild && !isLinked && code && (
            <View>
              <Text>OK, now use your phone, tap on This Phone Parent's Phone, enter your email and {code}</Text>
            </View>
        )}
      {isLinked && !allDoneForParents && (
        <View>
          <View>
            <Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>
            <Text>Would You Like To Link More Children ?</Text>
          </View>
          <View>
            <Button title='Yes' onPress={() => setLinked(false)} />
          </View>
          <View>
            <Button title='No' onPress={() => setAllDoneForParents(true)} />
          </View>
        </View>
      )}
      {allDoneForParents && (
        <View>
          <Text>All Done For You Now. Little Angel Will Notify You If Needed.</Text>
          <Text>Have a Nice Day :) </Text>
        </View>
      )}

    <StatusBar style="auto" />
  </View>

);
}

问题所在 #

你代码里的两个条件渲染表达式，当条件不满足时会返回空字符串，而空字符串会被React Native当成未包裹在<Text>组件中的文本节点，触发错误：

• {childsNameAddedNotif && (...)}：当childsNameAddedNotif为空字符串时，表达式结果为空字符串，会被直接渲染
• {isChild && !isLinked && code && (...)}：当code为空字符串时，表达式结果为空字符串，会被直接渲染

React Native要求任何文本（包括空字符串）都必须包裹在<Text>组件内，直接渲染空字符串就会触发这个报错。

修复方法 #

把这些条件改成布尔值判断，确保条件不满足时返回false（React Native会忽略false、null、undefined，不会渲染任何内容）：

修改后的对应代码片段：

// 修复第一个条件
{!!childsNameAddedNotif && (
  <View>
    <Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>
  </View>
)}

// 修复第二个条件
{isChild && !isLinked && !!code && (
  <View>
    <Text>OK, now use your phone, tap on This Phone Parent's Phone, enter your email and {code}</Text>
  </View>
)}

!!的作用是把任意值转换成布尔值：空字符串会变成false，非空字符串变成true，这样条件不满足时就不会返回空字符串，避免触发错误。

内容的提问来源于stack exchange，提问作者Mark