“文本字符串必須在<text> React Native 中的組件”</text>

Question

1. 我已經在return(之后添加了<Text></Text>標記，之后必須包含以下錯誤重新出現相鄰標記 <></>>

2. 錯誤消息： Text strings must be rendered within a <Text> component 。 如果您需要完整的代碼，請索取。

3. 符號&表示它位於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"
  },
  
});

Answer 1

在 React Native 中，字符串必須包含在<Text> string</Text>組件中。 因為它需要相應地映射到本機組件，這不提供像 HTML 這樣的靈活性。

在 React 中，沒有<div>或任何其他組件的字符串是可能的。 因為，HTML 不會給出語法錯誤或此類錯誤的錯誤。

Answer 2

您共享的代碼有多個語法錯誤，這讓我很難確定我是否正在查看真正的問題。 例如，您使用</MapView>關閉 MapView，但在此之前的任何地方都沒有 MapView。

據我所知，錯誤是由此引起的：

</View> </View>

由於您在 JSX 的一行中間有一個空間，它正在嘗試渲染該空間。 但是在本機反應中，文本只允許在<Text>組件內。

為了避免將來出現這些問題，我建議您使用 Prettier 或 Eslint 等工具來格式化您的代碼。 通過這樣做，這將被分成兩行，這樣做任何空白都是無關緊要的，因為行首和行尾的空白被忽略了。 將代碼格式化為兩行時出現此錯誤的唯一方法是執行以下操作，這將使錯誤更容易發現：

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

Answer 3

檢查您使用的所有組件是否已關閉，並且您尚未聲明 MapView 這肯定會出錯。

並從容器 1 中移除 &。

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

});