设备。(112:71350) 文本字符串必须在一个<Text>组件中呈现。在 react native

Question

[在此输入图片描述][1]1.我已经在return(后添加了标签，之后又出现了以下错误，相邻的标签必须被封闭<>&gt。

2.错误信息:设备。(112:71350)文本字符串必须在一个组件中渲染，如果你需要整个代码，请请求。

3. 符号&代表错误，它位于容器1:{在模拟器上显示的错误。https:/i.stack.imgur.comEZDgD.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

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

据我所知，这个错误是由这个引起的。

</View> </View>

因为你在一行JSX的中间有一个空格, 它正试图渲染那个空格. 但在 react native 中，文本只允许在一个 <Text> 组件。

为了避免将来出现这些问题，我建议你使用Prettier或Eslint等工具来格式化你的代码。通过这样做，这将被分割成两行，这样一来，任何空白都无关紧要，因为行首和行尾的空白会被忽略。当在两行上格式化你的代码时，唯一的办法就是做一些类似下面的事情，这样会使错误更容易被发现。

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

Answer 2

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

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