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 组件中,但是我不断收到有关文本违规的错误,但我什至没有在我的 TournamentCard 或 @ 中使用任何文本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 ;

【问题讨论】:

错误是否说明它发生在哪一行?您还可以显示其他组件的代码吗? 应该CardSectionView 的孩子吗?不确定您为Card 组件使用的库,但我会尝试删除View 并将样式应用于Card,以便CardSectionCard 的直接子代 我编辑了问题,现在它显示了错误图片以及卡片和卡片部分组件 【参考方案1】:

您在 CardSection 组件中的孩子之后连接了一个分号。该分号被解释为文本,并且由于每个文本都必须在 &lt;Text&gt; 组件内,因此会引发错误。

要解决这个问题,只需更改

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

自定义 React Native UI 组件:Invariant Violation