为了这个，我已经给自己开了太多枪了所以我把这个留给下一个不要..。

无论何时

Invariant Violation: Text strings must be rendered within a <Text> component

99% 的情况下将造成使用条件渲染只 & & 代替三元？: 声明。为什么？因为当你的条件解析为 未定义时，那里没有任何组件，相反，null 或空数组会安全地显示一个空白空间，从地狱的红色屏幕上拯救你的生命。

将所有逻辑条件渲染更改为三元渲染。

即:

别这样

widgetNumber === 10 && <MyComponent />

好的

widgetNumber === 10 ? <MyComponent /> : null

每一次，拜托，为了爱的本地反应。

在我的示例中，这个错误是由于在 Text 标记的结尾处出现了分号“ ;”造成的。对于那些没有得到上述合适答案的人，试试这个。通过删除分号，错误消失了。

错误代码的图像

如上图所示，由于分号’，我也遇到了这个错误;

对我来说，这是因为 JSX 内部有一个未打开的花括号。

<View>
{events.map(event => {
return (
<Card title={event.summary}>
<Text>Date: {event.start.dateTime}</Text>
</Card>
);
})}
} <------------ that was the culprit
</View>

this.state.recording ?(<Text>{this.secondsToMMSS(this.state.seconds)}</Text>) :                                     (null)

组件中的文本字符串必须呈现

{this.state.password.length > 0 && <Text>}

这将抛出相同的错误，因为它返回未定义的。 我们可以这样渲染

{this.state.password.length > ? <Text> : null}

In my case some part of the code was out side the text component for example:
<RadioForm style={styles.radiobutton}
radio_props={hobbies}
initial={1}
onPress={(value) => {ToastAndroid.show(value.toString(), ToastAndroid.SHORT)}}
buttonSize={4.5}
buttonOuterSize={19}
selectedButtonColor={'green'}
selectedLabelColor={'green'}
labelStyle=\{\{ fontSize: 14, }}
disabled={false}
formHorizontal={true}
/>
<RadioForm

上面这行 < RadioForm 没有关闭，这就是原因

从阅读这里的其他答案来看，这个错误消息是模糊的，并且由于各种原因显示出来。我已经得到它时，写评论，甚至在视图中的小空白(疯狂的是...)

例如: <View> {props.children} </View>

必须改为: <View>{props.children}</View>

我遇到了同样的问题，错误是在子元素和组件之间添加了空格，比如{ children }

注意 : 删除{ children }附近的所有空格

 <Provider value={something}>{children}</BlogContext.Provider>

之所以会出现这种情况，是因为我不小心使用了一个小写的函数名:

export const p = (props) => {
return (
<Text style={[styles.p]}>{props.children}</Text>
);
};

应该是:

export const P = (props) => {
return (
<Text style={[styles.p]}>{props.children}</Text>
);
};

注意，在第二个函数中，p是大写的。为了将这些组件检测为 React National 组件，这是必需的。

我也有同样的问题, 在我的案例中，我有一个 <AppText>组件，它在引擎盖下显示简单格式的 <Text>。

第一个密码是

<AppText> </AppText>

当我在尝试不同的东西时，我只是用自闭语法编写它

<AppText />

然后问题就突然解决了。

我认为这只是一个特殊的和不可见的字符，我写在标签错误 或者这个角色是来自 VSCode 的自动完成功能或片段, 因为我不能通过放置空格来重复这个错误。

在我的例子中，它发生是因为呈现函数中的注释

// Some comment here

解决方案:

• 删除评论
• 或者做成这样

有时，当您保存时，Prettier 或您的代码格式化程序会将此添加到您的 JSX 中。

<View>
{' '}
</View>

把这个拿掉，你就没事了。

如果初始值为空字符串，请使用下面给出的代码。或者有条件地检查初始值。在这里，我有条件地检查错误是否为空，然后显示错误。

{this.state.error !== '' && (
<Text>
{this.state.error}
</Text>
)}

同样的问题和@serdasenay 的评论让我意识到根本原因。

使用语法 {condition && <Element/>}本身并没有错，但是知道发生了什么是很重要的。

问题的根源是逻辑短路。在 Javascript 逻辑表达式中，&&计算为最后一个 true等效值。但不是转换为 true，而是转换为布尔值之前的实际值。这就是实际上允许这种语法开始的地方。因为如果 condition是 true，则 <Element/>始终是 true，所以表达式的计算结果为 <Element/>

当条件为 false时就会出现问题。当 &&表达式失败时，计算结果为第一个值，即 condition。但在它被转换为布尔值之前。 因此，如果使用直接字符串或数字作为 condition，并且它的计算结果为 false，则逻辑表达式的计算结果将为该字符串或数字。 使用空数组的 {array.length && <List/>}计算结果为 {0}，这将引发错误。

解决方案是确保 condition是一个真正的布尔值(这是有效的，因为 React 可以处理呈现布尔值——它认为 React 只是忽略它们)。因此，应该这样做: {array.length > 0 && <List/>}

当 return()函数中有 /*Commented code*/时，将发生此错误。

花了一整天的时间做完全不相关的任务，试图解决这个问题。

有接线员! ！它将一个字符串类型转换为布尔值，并使变量为空字符串时为 false:

{!!error &&
<Text>
Error message: {error}
</Text>}

对我来说，这是由于关闭 >在接触不透明度 反应原生可触摸不透明度错位。

错误代码 :

<TouchableOpacity>
onPress={() => this.setState({ showOverLay: true })}
<Image
source={cardImage}
resizeMode="contain"
style={[
styles.cardImage, cardImageStyle
]}
/>
</TouchableOpacity>

好代码 :

  <TouchableOpacity
onPress={() => this.setState({ showOverLay: true })}>
<Image
source={cardImage}
resizeMode="contain"
style={[
styles.cardImage, cardImageStyle
]}
/>
</TouchableOpacity>

在我的例子中，我必须删除 View 标记和 Text 标记之间的空白 来自

<View>  <Text style=\{\{ color: "white"}}>Start</Text> </View>

到

<View><Text style=\{\{ color: "white"}}>Start</Text></View>

好吧，如果你走这么远，是因为你可能和我有同样的问题，例如:

return <View key={r}> {columns} </View>

以及:

return <View style={styles.container}> {rows} </View>

你可以看到在“ > {”之间有一个空格 是啊，这就是问题所在，试着删掉它们。

下面的代码还检查空字符串和真值。

  return(
<View>
{!!this.state.error && <Text>{this.state.errorMessage}</Text>}
</View>
);

对我来说，错误是因为我将 state 对象初始化为一个空字符串。

const [category, setCategory] = useState("")

如果状态将是一个对象，那么必须在开始时将其设置为 null。

const [category, setCategory] = useState(null)

问题解决了。

删除外部组件之间的空格

<Text></Text>

前女友，别用

<Button> <Text>hi</Text></Button>

但是利用

<Button><Text>hi</Text></Button>

从任何组件外部删除标记 ()，这在 JSX()的 return 和 if 语句中使用

这是错误的: <View>(<Button/>)</View> 这是真的: <View><Button/></View>

在我的例子中，我将状态文本命名为组件的名称，以确保它是一个不同的名称。

至于我，我有这个错误，因为拖尾’; 我变了:

<Divider orientation="horizontal" />;

致:

<Divider orientation="horizontal" />

“(空字符串)不工作的条件。将它们更改为 null

不起作用:

<ButtonBorderLarge
buttonText={'Choose certificate'}
onPressHandler={pickCertificate}
icon={docName ? 'check' : ''}
/>

工作:

<ButtonBorderLarge
buttonText={'Choose certificate'}
onPressHandler={pickCertificate}
icon={docName ? 'check' : null}
/>

在我的情况下，Tanveer Rifu 的回答工作。但是除此之外，如果在 return 语句中有空格，可以通过将其包装在括号 ()中并对每个标记使用一行来解决这个问题。

例子，而不是

const HelloWorld = () => {
let counter = 0;
return <View> <Button title="Increment"> </Button><Text>{ counter}</Text> </View>
}

你可以像下面这样包装

const HelloWorld = () => {
let counter = 0;
return (
<View>
<Button title="Increment"></Button>
<Text>{counter} </Text>
</View>
)
}

但是，如果在单行中有多个元素，不要在不同的标记之间留空格。

在 & & 运算符中使用字符串或数值时会发生这种情况。

例如:

const [a, setA] = useState('')
const [b, setB] = useState(0)

在这里，a && <View />和 b && <View />都将抛出此错误。

您需要将此条件值作为 true/false, null,或 undefined数据类型。

您应该将它们转换为 Boolean类型，而不是直接使用 string and numeric data types。

正确的执行应该是:

!!a && <View />和 !!b && <View />

或者

否定; !a && <View />和 !b && <View />

快乐学习;)

解决方案

!!将解决这个问题。

{!!error && <Text>{error}</Text>}

解释

• 如果我们使用单一的不 !操作和分配空的 ""字符串然后!”将成为 true并将呈现空字符串，因为我们正在将字符串转换为布尔值 !"" => true

它在 <Pressable>上也出现了错误。因此，避免使用可压缩按钮，而不要使用本机按钮。它可能有助于人们谁是使用反应-原生6或以上。

或者试试这条路

<Pressable titleSize={20} style={styles.button}>
<Text>Pressable tab
</Text>
</Pressable>

对我来说，我是进口的

从“反应-原生网络”导入{按钮，查看} ;

而不是

从“反应原生”导入{ Button，View } ;

确保您从正确的包装进口。

如果在您的和(在同一行中)之间有任何空格，那么也会出现这个错误。

**eg: <Text> <Button>click me<Button><Text>部族，第二天

           ^(make sure that you have no space if it is in same line)






  

如果两个标签在同一行，一定要避免它们之间的空格。

通过这样做，我解决了这个问题。

我是一个反应本地的绝对初学者，我的错误是从反应本地网络导入文本，扁平列表，而不仅仅是’反应本地’，它自动发生在 VS 代码，我不知道为什么！

不要

import { Text, FlatList, StyleSheet } from "react-native-web";

好的

import { Text, FlatList, StyleSheet } from "react-native";

对我来说，智能感知的导入是错误的。 它从“反应本地网络”而不是“反应本地”导入了 Button。 一旦你在电话上运行，你会得到这个错误。

如果内部的文本节点以空格开始或结束，例如 <Text> I am here <Text>，则会发生此错误。 尝试删除空格，即 <Text>I am here<Text>。在可触摸不透明度总是使用文本组件写一个非空格字符串，不开始或结束与空格。

当你从本地反应网站导入一些东西并在本地反应网站中使用它时，这种情况也可能发生，反之亦然。 如果您在返回本地时遇到这个错误，只需搜索所有的导入并删除 web 即可(使用 import { Something }从“返回本地”中删除)

在我的例子中，它是位于 JSX 语法末尾的分号。

// wrong:
<View>
<MyComponent>;
</View>


// correct:
<View>
<MyComponent>
</View>

确保在 babel.config.js 中有正确的预置:

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
...
}

我有一个 Next Js/React NativeWeb 应用程序嵌入在我的 React Nativeapp 中，并在两者之间切换。切换包括在运行 Next Js 应用程序时注释掉“ module: Metro-response-national-babel-preset”(支持使用 Next Js preset)。在没有‘ Metro’预设的情况下运行 React Nativeapp 的结果是‘文本字符串必须在 < Text > 组件’错误中呈现。

在我的情况下，它是一个随机字母后的自我封闭组件，像这样

<Card />r