동봉 된 태그가 추가 된 동안 동봉 된 태그가없는 것에 대한 구문 오류가 표시됩니다.

Question

헤더가없는 react-native-gifted-chat 예제를 사용하고 있습니다. 네이티브베이스의 헤더를 추가하려고했습니다. 통합 후 태그가 이미있는 동안 태그를 빠뜨리는 것에 대한 오류가 표시됩니다. 이 문제를 어떻게 해결할 수 있습니까?

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', 
    }, 
}); 

그것은

<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} 
      /> 

가장 흥미로운 부분은 위의 giftedchat 구성 요소에서 기본 기본 헤더를 추가하기 전에 그것이 '년후이다이 라인에 누락 된 둘러싸는 태그에 대한 구문 오류를 보여줍니다 여기에 코드입니다 그러한 오류를 보여 주는 동안 통합 후 이상한 오류가 발생했습니다. 무엇이 이것을 일으킬 수 있습니까?

Answer 1

하위 요소/구성 요소가있는 단일 요소/구성 요소 만 반환 할 수 있습니다. 두 형제 구성 요소를 반환하려고합니다. 보기 또는 유사한 구성 요소로 감싸고 돌아옵니다.

예

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> 
); 
}