web-dev-qa-db-fra.com

Violation invariante: les chaînes de texte doivent être rendues dans un composant Text

entrez la description de l'image ici J'essaie d'ajouter mon composant CardsSection dans mon composant Card mais je reçois toujours cette erreur concernant une violation de texte mais je n'utilise même pas tout texte dans mes fichiers Tournament, Card ou CardSection .js. Je ne vois pas pourquoi j'obtiens cette erreur. Quelqu'un peut-il me dire quoi faire et pourquoi?

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 };
cssreactjsreact-nativemobilereact-router
5
Masterolu

Vous avez un point-virgule concaténé juste après vos enfants dans le composant CardSection. Ce point-virgule est interprété comme du texte et puisque chaque texte doit se trouver dans un <Text> composant, l'erreur est levée.

Pour résoudre le problème, changez simplement

const CardSection = (props) => (
  <View style={styles.containerStyle}>
    {props.children};
  </View>
);

à

const CardSection = (props) => (
  <View style={styles.containerStyle}>
    {props.children}
  </View>
);
3
Andre Knob

Essayez de supprimer tous les espaces blancs (et éventuellement les fins de ligne) de l'intérieur de votre balise parent.

Facebook dit que ce n'est pas un bogue et qu'il fonctionne comme prévu (dans un rapport de bogue connexe) et qu'il n'a introduit aucun changement dans .56, mais ce n'est pas ainsi que cela fonctionne et cela fonctionne apparemment différemment des versions précédentes.

Expo n'a pas non plus de problème avec des espaces supplémentaires. Comment tu es censé le faire maintenant, je ne peux pas te le dire.

2
Lassi Kinnunen