Invariant Violation:文本字符串必须在 Text 组件中呈现
Posted
技术标签:
【中文标题】Invariant Violation:文本字符串必须在 Text 组件中呈现【英文标题】:Invariant Violation: Text strings must be rendered within a Text component 【发布时间】:2019-02-20 19:43:55 【问题描述】:我正在尝试将我的 CardsSection
组件添加到我的 Card
组件中,但是我不断收到有关文本违规的错误,但我什至没有在我的 Tournament
、Card
或 @ 中使用任何文本987654326@ .js 文件。我不明白为什么会收到此错误。谁能告诉我该怎么做以及为什么?
Tournament.js
import React from "react";
import View, Text, Image, ScrollView from "react-native";
import Card, Button, Spinner, CardSection from "../common";
class Tournaments extends React.Component
static navigationOptions =
tabBarLabel: "Tournaments"
;
render()
return (
<View style=styles.containerStyle>
<Card>
<View style=styles.logoContainer>
<Image
style=styles.logo
source=require("../../Images/ShoeJackCityLogo.png")
/>
</View>
<View style=styles.formContainer />
</Card>
<ScrollView horizontal>
<Card>
<View style= flex: 1, flexDirection: "row" >
<CardSection>
<Image
style=styles.product
source=require("../../Images/aj_4_toro.png")
/>
</CardSection>
<CardSection>
<Image
style=styles.product
source=require("../../Images/aj_4_toro.png")
/>
</CardSection>
<CardSection>
<Image
style=styles.product
source=require("../../Images/aj_4_toro.png")
/>
</CardSection>
</View>
</Card>
</ScrollView>
</View>
);
const styles =
containerStyle:
flex: 1,
backgroundColor: "#F13C20",
paddingBottom: 20
,
logoContainer:
alignItems: "center",
flexGrow: 1,
justifyContent: "flex-start",
paddingBottom: 15
,
logo:
paddingTop: 15,
width: 50,
height: 50
,
product:
width: 100,
height: 100,
paddingBottom: 15,
marginRight: 50
;
export default Tournaments;
CardSection.js
import React from 'react';
import View from 'react-native';
const CardSection = (props) => (
<View style=styles.containerStyle>
props.children;
</View>
);
const styles =
containerStyle:
borderBottomWidth: 1,
padding: 5,
backgroundColor: 'white',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
;
export CardSection ;
Card.js
import React from 'react';
import View from 'react-native';
const Card = (props) => (
<View style=styles.containerStyle>
props.children
</View>
);
const styles =
containerStyle:
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: width: 0, height: 2 ,
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 30,
;
export Card ;
【问题讨论】:
错误是否说明它发生在哪一行?您还可以显示其他组件的代码吗? 应该CardSection
是View
的孩子吗?不确定您为Card
组件使用的库,但我会尝试删除View
并将样式应用于Card
,以便CardSection
是Card
的直接子代
我编辑了问题,现在它显示了错误图片以及卡片和卡片部分组件
【参考方案1】:
您在 CardSection 组件中的孩子之后连接了一个分号。该分号被解释为文本,并且由于每个文本都必须在 <Text>
组件内,因此会引发错误。
要解决这个问题,只需更改
const CardSection = (props) => (
<View style=styles.containerStyle>
props.children;
</View>
);
到
const CardSection = (props) => (
<View style=styles.containerStyle>
props.children
</View>
);
【讨论】:
我也犯了同样的错误。非常感谢!【参考方案2】:尝试从父标签中删除所有空格(可能还有行尾)。
Facebook 表示这不是一个错误并且按预期工作(在相关的错误报告中)并且他们没有对 .56 进行任何更改,但这不是它的实际工作方式,它的工作方式与以前的版本明显不同。
此外,Expo 也没有多余的空格问题。你现在应该如何打算,我不能告诉你。
【讨论】:
以上是关于Invariant Violation:文本字符串必须在 Text 组件中呈现的主要内容,如果未能解决你的问题,请参考以下文章
如何修复 Invariant Violation:元素类型无效:预期为字符串(对于内置组件)
React-Native Invariant Violation:元素类型无效
React Native Invariant Violation:查看配置
GatsbyJS Invariant Violation:在尝试推断 GraphQL 类型时遇到错误
Gatsby - WebpackError: Invariant Violation error with apolloClient