Il montre une erreur de syntaxe à propos d'une balise englobante manquante alors que j'ai ajouté une balise englobante

Question

J'utilise un exemple de chat de réaction-native-gifted qui n'a pas d'en-tête. J'ai essayé d'ajouter l'en-tête de la base native. Après l'intégration, il indique une erreur à propos de la balise englobante manquante alors qu'elle était déjà là. Comment cela peut-il être réparé? Voici le code:

import React from 'react'; 
import { 
    Platform, 
    StyleSheet, 
    Text, 
    View, 
} from 'react-native'; 
import { Container, Header, Left, Body, Right, Button, Icon, Title, Text } from 'native-base'; 

import {GiftedChat, Actions, Bubble, SystemMessage} from 'react-native-gifted-chat'; 
import CustomActions from './CustomActions'; 
import CustomView from './CustomView'; 

export default class Example extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     messages: [], 
     loadEarlier: true, 
     typingText: null, 
     isLoadingEarlier: false, 
    }; 

    this._isMounted = false; 
    this.onSend = this.onSend.bind(this); 
    this.onReceive = this.onReceive.bind(this); 
    this.renderCustomActions = this.renderCustomActions.bind(this); 
    this.renderBubble = this.renderBubble.bind(this); 
    this.renderSystemMessage = this.renderSystemMessage.bind(this); 
    this.renderFooter = this.renderFooter.bind(this); 
    this.onLoadEarlier = this.onLoadEarlier.bind(this); 

    this._isAlright = null; 
    } 

    componentWillMount() { 
    this._isMounted = true; 
    this.setState(() => { 
     return { 
     messages: require('./data/messages.js'), 
     }; 
    }); 
    } 

    componentWillUnmount() { 
    this._isMounted = false; 
    } 

    onLoadEarlier() { 
    this.setState((previousState) => { 
     return { 
     isLoadingEarlier: true, 
     }; 
    }); 

    setTimeout(() => { 
     if (this._isMounted === true) { 
     this.setState((previousState) => { 
      return { 
      messages: GiftedChat.prepend(previousState.messages, require('./data/old_messages.js')), 
      loadEarlier: false, 
      isLoadingEarlier: false, 
      }; 
     }); 
     } 
    }, 1000); // simulating network 
    } 

    onSend(messages = []) { 
    this.setState((previousState) => { 
     return { 
     messages: GiftedChat.append(previousState.messages, messages), 
     }; 
    }); 

    // for demo purpose 
    this.answerDemo(messages); 
    } 

    answerDemo(messages) { 
    if (messages.length > 0) { 
     if ((messages[0].image || messages[0].location) || !this._isAlright) { 
     this.setState((previousState) => { 
      return { 
      typingText: 'React Native is typing' 
      }; 
     }); 
     } 
    } 

    setTimeout(() => { 
     if (this._isMounted === true) { 
     if (messages.length > 0) { 
      if (messages[0].image) { 
      this.onReceive('Nice picture!'); 
      } else if (messages[0].location) { 
      this.onReceive('My favorite place'); 
      } else { 
      if (!this._isAlright) { 
       this._isAlright = true; 
       this.onReceive('Alright'); 
      } 
      } 
     } 
     } 

     this.setState((previousState) => { 
     return { 
      typingText: null, 
     }; 
     }); 
    }, 1000); 
    } 

    onReceive(text) { 
    this.setState((previousState) => { 
     return { 
     messages: GiftedChat.append(previousState.messages, { 
      _id: Math.round(Math.random() * 1000000), 
      text: text, 
      createdAt: new Date(), 
      user: { 
      _id: 2, 
      name: 'React Native', 
      // avatar: 'https://facebook.github.io/react/img/logo_og.png', 
      }, 
     }), 
     }; 
    }); 
    } 

    renderCustomActions(props) { 
    if (Platform.OS === 'ios') { 
     return (
     <CustomActions 
      {...props} 
     /> 
    ); 
    } 
    const options = { 
     'Action 1': (props) => { 
     alert('option 1'); 
     }, 
     'Action 2': (props) => { 
     alert('option 2'); 
     }, 
     'Cancel':() => {}, 
    }; 
    return (
     <Actions 
     {...props} 
     options={options} 
     /> 
    ); 
    } 

    renderBubble(props) { 
    return (
     <Bubble 
     {...props} 
     wrapperStyle={{ 
      left: { 
      backgroundColor: '#f0f0f0', 
      } 
     }} 
     /> 
    ); 
    } 

    renderSystemMessage(props) { 
    return (
     <SystemMessage 
     {...props} 
     containerStyle={{ 
      marginBottom: 15, 
     }} 
     textStyle={{ 
      fontSize: 14, 
     }} 
     /> 
    ); 
    } 

    renderCustomView(props) { 
    return (
     <CustomView 
     {...props} 
     /> 
    ); 
    } 

    renderFooter(props) { 
    if (this.state.typingText) { 
     return (
     <View style={styles.footerContainer}> 
      <Text style={styles.footerText}> 
      {this.state.typingText} 
      </Text> 
     </View> 
    ); 
    } 
    return null; 
    } 

    render() { 
    return (
<Header> 
      <Left> 
      <Button transparent> 
       <Icon name='arrow-back' /> 
      </Button> 
      </Left> 
      <Body> 
      <Title>Header</Title> 
      </Body> 
      <Right> 
      <Button transparent> 
       <Text>Cancel</Text> 
      </Button> 
      </Right> 
     </Header> 
     <GiftedChat 
     messages={this.state.messages} 
     onSend={this.onSend} 
     loadEarlier={this.state.loadEarlier} 
     onLoadEarlier={this.onLoadEarlier} 
     isLoadingEarlier={this.state.isLoadingEarlier} 

     user={{ 
      _id: 1, // sent messages should have same user._id 
     }} 

     renderActions={this.renderCustomActions} 
     renderBubble={this.renderBubble} 
     renderSystemMessage={this.renderSystemMessage} 
     renderCustomView={this.renderCustomView} 
     renderFooter={this.renderFooter} 
     /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    footerContainer: { 
    marginTop: 5, 
    marginLeft: 10, 
    marginRight: 10, 
    marginBottom: 10, 
    }, 
    footerText: { 
    fontSize: 14, 
    color: '#aaa', 
    }, 
}); 

Il montre erreur de syntaxe de la balise enfermant manquante sur cette ligne

<GiftedChat 
      messages={this.state.messages} 
      onSend={this.onSend} 
      loadEarlier={this.state.loadEarlier} 
      onLoadEarlier={this.onLoadEarlier} 
      isLoadingEarlier={this.state.isLoadingEarlier} 

      user={{ 
       _id: 1, // sent messages should have same user._id 
      }} 

      renderActions={this.renderCustomActions} 
      renderBubble={this.renderBubble} 
      renderSystemMessage={this.renderSystemMessage} 
      renderCustomView={this.renderCustomView} 
      renderFooter={this.renderFooter} 
      /> 

partie la plus intéressante est que, avant d'ajouter un en-tête de base native dans le composant giftedchat au-dessus n » était pas t montré une telle erreur alors qu'après l'intégration, il a dit que cette erreur étrange. Qu'est-ce qui peut causer ça?

Answer 1

Vous ne pouvez renvoyer qu'un seul élément/composant comportant des éléments/composants enfants. Vous essayez de retourner 2 composant frère. Emballez-les avec une vue ou un élément similaire, puis retournez.

Exemple

render() { 
    return (
    <View> 
     <Header> 
     <Left> 
      <Button transparent> 
      <Icon name='arrow-back' /> 
      </Button> 
     </Left> 
     <Body> 
      <Title>Header</Title> 
     </Body> 
     <Right> 
      <Button transparent> 
      <Text>Cancel</Text> 
      </Button> 
     </Right> 
     </Header> 
     <GiftedChat 
     messages={this.state.messages} 
     onSend={this.onSend} 
     loadEarlier={this.state.loadEarlier} 
     onLoadEarlier={this.onLoadEarlier} 
     isLoadingEarlier={this.state.isLoadingEarlier} 
     user={{ 
      _id: 1, // sent messages should have same user._id 
     }} 
     renderActions={this.renderCustomActions} 
     renderBubble={this.renderBubble} 
     renderSystemMessage={this.renderSystemMessage} 
     renderCustomView={this.renderCustomView} 
     renderFooter={this.renderFooter} 
     /> 
    </View> 
); 
}