设备：（112：71350）必须在<Text>组件内呈现文本字符串。 ？在本地反应

Question

[在此处输入图片描述] [1] 1.i已经在return（之后添加了标签，之后必须将以下错误重新出现在相邻标签之间，<>>

2。错误消息：设备：（112：71350）文本字符串必须在组件中呈现。请要求您是否需要完整的代码。

1. 符号＆表示位于container1的错误：{ 模拟器_ https://i.stack.imgur.com/EZDgD.png
上显示错误

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"
  },

});```


  [1]: https://i.stack.imgur.com/EZDgD.png

Answer 1

在React Native中，字符串必须包装在<Text> string</Text>组件中。由于需要将其映射到本机组件中，因此无法像HTML那样提供灵活性。

在React中，不带<div>或任何其他组件的字符串是可能的。既然如此，HTML不会针对语法错误或此类错误提供错误。

Answer 2

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

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

</View> </View>

由于您在JSX行的中间有一个空格，因此它试图渲染该空格。但是在react native中，文本只能在<Text>组件内使用。

为避免将来出现这些问题，建议您使用诸如Prettier或Eslint之类的工具来格式化代码。通过这样做，这将被分成两行，并且在这种情况下，任何空格都不相关，因为忽略了行首和尾的空格。在两行代码上格式化时，发生此错误的唯一方法是执行以下操作，这将使错误更容易发现：

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