React Native 中的“文本字符串必须在 <Text> 组件中呈现”答案

【问题标题】："Text strings must be rendered within a <Text> component" in React NativeReact Native 中的“文本字符串必须在 <Text> 组件中呈现”
【发布时间】：2020-05-10 15:40:37
【问题描述】：

我已经在return(之后添加了<Text></Text>标签，之后出现以下错误，相邻标签必须括起来>>
错误消息：Text strings must be rendered within a <Text> component。如果您需要完整的代码，请索取。
符号&表示它位于container1的错误：

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import BoxContainer from './components/BoxContainer'

export default class App extends Component {
  //Binding the function with class
 
  buttonClickListener = () => {
    alert("Clicked On Button !!!");
  };

  render() {
    
    return (
<>
     <Text style={styles.headerText}> </Text>
     <View style={styles.page}>
        <BoxContainer style={styles.container3}>
          <View style={[{ width: 50, height : 60, backgroundColor: "orange" }]}>
        
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
            />
         </View></BoxContainer> 
        
        <BoxContainer style={styles.container1}>
           <View style={{flexDirection:'row'}}> 

           <View style={[{ width: "7%", height :200,backgroundColor: "green" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
            />
          </View>
           <View style={[{ width: "92%", height :300, backgroundColor: "red" }]}>
          />
        </MapView> <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
            />
         </View> </View></View></BoxContainer>
          
    <BoxContainer style={styles.container2}>
           <View style={{flexDirection:'column'}}>
        <View style={[{ width: 400, height :100, margin: 1, backgroundColor: "blue" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button One"
            color="#00B0FF"
          />
        </View>

        <View style={[{ width: 400,height :90, margin: 1, backgroundColor: "black" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Two"
            color="#EC407A"
          />
        </View>

        <View style={[{ width: 400,height :80, margin: 1, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="Button Three"
            color="#1DE9B6"
          />
        </View></View></BoxContainer></View>
</>
    );
  }
}

const styles = StyleSheet.create({
  page:{flex:1 ,alignItems: "left"},
 
  container1: {& 
    flex: 7,
    
 map: {position:'absolute'},
    flexDirection: 'row',
    justifyContent: "left",
    alignItems: "left",
    
   
    backgroundColor: "#F5FCFF"
   
  },
  container2: {
    flex: 7,
    flexDirection: 'column',
    justifyContent: "left",
    alignItems: "left",
    backgroundColor: "#F5FCFF"
  },
   
  headerText: {
    fontSize: 10,
    textAlign: "center",
    
    fontWeight: "bold"
  },
  
});

【问题讨论】：

please request if you need the entire code. 不是整个代码，但我们确实需要查看发生这种情况的 jsx。样式表不会导致此错误。
容器1出现错误：{~here
那行代码没有理由会导致该错误。
我应该上传整个代码吗-'没有理由该行代码会导致该错误'
只是导致此问题的代码。我不知道你为什么认为那条线路有问题，但不可能。正如错误消息所说，问题在于您正在呈现不在<Text> 组件内的字符串。如何向我们展示您的组件返回 JSX 的位置

标签： javascript react-native react-native-navigation

【解决方案1】：

在 React Native 中，字符串必须包裹在 <Text> string</Text> 组件中。因为它需要相应地映射到本机组件中，这不像 HTML 那样提供灵活性。

在 React 中，没有<div> 或任何其他组件的字符串是可能的。因为，HTML 不会给出语法错误或这些类型的错误。

【讨论】：

这是我认为在我到达带有代码的特定屏幕之前出现的运行时错误，我已经上传了模拟器中显示的错误消息i.stack.imgur.com/EZDgD.png

【解决方案2】：

您共享的代码有多个语法错误，这让我很难确定我是否正在查看真正的问题。例如，您使用</MapView> 关闭了一个 MapView，但在此之前的任何地方都没有 MapView。

据我所知，错误是由以下原因引起的：

</View> </View>

由于您在 JSX 的一行中间有一个空格，它正在尝试渲染该空格。但是在 react native 中，文本只允许在 <Text> 组件内。

为避免将来出现这些问题，我建议您使用 Prettier 或 Eslint 等工具来格式化您的代码。通过这样做，这将被分成两行，这样做任何空白都是无关紧要的，因为行首和行尾的空白被忽略了。在将代码格式化为两行时出现此错误的唯一方法是执行以下操作，这将使错误更容易被发现：

  </View>{" "}
</View>

【讨论】：

所以之前我遇到了错误解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 ...> 吗？所以我移动了添加>，然后是相邻的元素，然后那个错误消失了，这个错误出现了对不起，但我会
所以之前我遇到了错误解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 ...> 吗？所以我移动了添加 > 然后相邻的元素然后那个错误消失了，这个错误出现了对不起，但我会省略一些元素，比如地图，因为它确实包含一些关于我的位置的信息我确实将 var mapstyle 转换为 view mapstyle 因为我希望将地图包含在容器中而不是整个屏幕中，所以如果您能纠正错误或只是说出来，那就太好了！

【解决方案3】：

检查您使用的所有组件是否已关闭而且您还没有声明 MapView 肯定会报错。

并从容器 1 中移除 &。

【讨论】：

【解决方案4】：

您声明了一些额外的 View 标签，还添加了 MapView Closing 标签，但没有添加起始标签。这就是您面临此错误的原因。我删除了该标签并对齐您的代码。

这里是代码

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import BoxContainer from './components/BoxContainer'

export default class App extends Component {
  //Binding the function with class

  buttonClickListener = () => {
alert("Clicked On Button !!!");
};

render() {

return (
  <>
  <Text style={styles.headerText}> </Text>
  <View style={styles.page}>
    <BoxContainer style={styles.container3}>
      <View style={[{ width: 50, height : 60, backgroundColor: "orange" }]}>
        <Button
          onPress={this.buttonClickListener}
          title="BUTTON1"
          color="#00B0FF"
        />
      </View>
    </BoxContainer>
    <BoxContainer style={styles.container1}>
      <View style={{flexDirection:'row'}}>
        <View style={[{ width: "7%", height :200,backgroundColor: "green" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
          />
        </View>
        <View style={[{ width: "92%", height :300, backgroundColor: "red" }]}>
          <Button
            onPress={this.buttonClickListener}
            title="BUTTON1"
            color="#00B0FF"
          />
        </View>
      </View>
  </BoxContainer>

<BoxContainer style={styles.container2}>
  <View style={{flexDirection:'column'}}>
    <View style={[{ width: 400, height :100, margin: 1, backgroundColor: "blue" }]}>
      <Button
        onPress={this.buttonClickListener}
        title="Button One"
        color="#00B0FF"
      />
    </View>

    <View style={[{ width: 400,height :90, margin: 1, backgroundColor: "black" }]}>
      <Button
        onPress={this.buttonClickListener}
        title="Button Two"
        color="#EC407A"
      />
    </View>

    <View style={[{ width: 400,height :80, margin: 1, backgroundColor: "red" }]}>
      <Button
        onPress={this.buttonClickListener}
        title="Button Three"
        color="#1DE9B6"
      />
    </View>
  </View>
</BoxContainer>
  </View>
</>
);
}
}

const styles = StyleSheet.create({
page:{flex:1 ,alignItems: "left"},

container1: {
 flex: 7,
 map: {position:'absolute'},
 flexDirection: 'row',
 justifyContent: "left",
 alignItems: "left",
 backgroundColor: "#F5FCFF"
},
container2: {
 flex: 7,
 flexDirection: 'column',
 justifyContent: "left",
 alignItems: "left",
 backgroundColor: "#F5FCFF"
},

headerText: {
 fontSize: 10,
 textAlign: "center",
 fontWeight: "bold"
},

});

【讨论】：