Question

我不为什么，但是当我在View标签中放置几个相同的组件时，RN抛出了Invariant Violation：文本字符串...错误。

当我只在视图中放置一个组件时，它会很好地工作

import React from "react";`
import { View, StyleSheet, Text } from "react-native";

export default class Alphabet extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>a</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: 50,
    height: 50,
    borderWidth: 1,
    borderColor: "black"
  }
});

Alphabets.js

import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import Alphabet from "../SubComponents/Alphabet";

export default class Alphabets extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Alphabet /> <Alphabet />

        // one <Alphabet/> works as expected

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
});

编辑：当我将组件分别放在新行中时，它也可以工作。

render() {
    return (
      <View style={styles.container}>
        <Alphabet /> 
        <Alphabet />
      </View>
    );
  }

我该如何解决？

Answer 1

尝试删除两个组件之间的空间将消除错误代替：

<Alphabet> </Alphabet>

做这样的事情

<Alphabet />
<Alphabet />

不变违规：使用组件的多个实例时，必须在<text>组件内呈现文本字符串

1 个答案: