web-dev-qa-db-ja.com

不変の違反：テキスト文字列はテキストコンポーネント内でレンダリングする必要があります

ここに画像の説明を入力してくださいCardsSectionコンポーネントをCardコンポーネントに追加しようとしていますが、テキスト違反に関するこのエラーが発生し続けますが、使用していませんTournament、Card、またはCardSection .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 };
cssreactjsreact-nativemobilereact-router
5
Masterolu

CardSectionコンポーネントの子の直後にセミコロンが連結されています。このセミコロンはテキストとして解釈されます。すべてのテキストは<Text>コンポーネント、エラーがスローされます。

問題を修正するには、単に変更します

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

に

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

親タグ内からすべての空白（および行末）を削除してみてください。

Facebookによると、これはバグではなく、意図したとおりに機能しており（関連するバグレポートで）、. 56に変更は導入されていませんが、実際の動作とは異なり、以前のバージョンとは明らかに異なる動作をしています。

また、エキスポは余分な空白があっても問題ありません。今あなたがそれをどのように意図することになっているのか、私には言えません。

2
Lassi Kinnunen