Nicht in der Lage, Komponenten in reagieren zu reproduzieren Native

Question

Ich möchte eine Chat-App in Reaktion nativ machen und Derzeit entwerfe ich statische Chat-Bildschirm, der so aussehen sollte.

Also, was ich diese Art von Chat-Bildschirm machen tue ist Ich mache zwei separate Komponenten Message Sender und Nachrichten Reciever

Das ist mein MessageReciever Komponente ist

import React, { Component } from 'react'; 
import { Container, Header, Content, Button, Text, Icon } from 'native-base'; 
import { StyleSheet } from 'react-native'; 


class MessageReciever extends Component { 
    render() { 
    return (
     <Container> 

     <Content> 


      <Button style ={{marginLeft:22,marginTop:28,backgroundColor:'#F0F0F0',borderRadius:12, 
       flexDirection:'column',height:'auto',width:280,alignItems:'stretch',flex:1,}} disabled> 
       <Text style ={styles.nameText}>Jordan</Text> 

       <Button transparent style ={{backgroundColor:'#F0F0F0', 
       height:'auto',width:280,alignItems:'stretch',borderRadius:12,flex:1}} disabled> 

        <Text uppercase = {false} style ={styles.messageText} >Epo polam valayada? 
        </Text> 


        <Text style ={styles.timeText}>08:23AM</Text>  

       </Button> 

      </Button> 

     </Content> 
     </Container> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 

    timeText:{ 
     fontSize:14, 
     textAlign:'right', 
     opacity:0.50, 
     color:'#000000' 

    }, 

    messageText:{ 
     fontSize:17, 
     textAlign:'left', 
     opacity:1.0, 
     width:200, 
     height:'auto', 
     color:'#000000', 
     alignItems:'stretch', 

    }, 
    nameText:{ 
     fontSize:15, 
     textAlign:'left', 
     opacity:1.0, 
     width:200, 
     height:'auto', 
     color:'green', 
     alignItems:'stretch', 


    }, 


}) 

export default MessageReciever; 

und Dies ist meine MessageSender-Komponente

import React, { Component } from 'react'; 
import { Container, Header, Content, Button, Text, Icon } from 'native-base'; 
import { StyleSheet } from 'react-native'; 


class MessageSender extends Component { 
    render() { 
    return (
     <Container> 
     <Content> 

       <Button style ={{backgroundColor:'#3399ff', 
        marginLeft:67,marginTop:28,borderRadius:12, 
        height:'auto',width:287,alignItems:'stretch',flex:1}} disabled> 

        <Text uppercase = {false} style ={styles.messageText}>Players differentiation missing. 
          Notification for our own message? 
        </Text> 


        <Text style ={styles.timeText}>08:23AM</Text>  

       </Button> 


     </Content> 
     </Container> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 

    timeText:{ 
     fontSize:14, 
     textAlign:'right', 
     opacity:0.50, 
     color:'#FFFFFF' 

    }, 

    messageText:{ 
     fontSize:17, 

     opacity:1.0, 
     width:210, 
     height:'auto', 
     color:'#FFFFFF', 
     alignItems:'stretch', 

    }, 
    nameText:{ 
     fontSize:15, 
     textAlign:'left', 
     opacity:1.0, 
     width:200, 
     height:'auto', 
     color:'green', 
     alignItems:'stretch', 


    }, 



}) 

export default MessageSender; 

Und das ist mein Haupt Chat-Bildschirm, wo ich diese beiden Komponenten in der Render-Methode

import React, { Component } from 'react'; 
import { Container, Header, Content, Button, Text, Icon } from 'native-base'; 
import { StyleSheet } from 'react-native'; 
import { MessageReciever } from '../components/MessageReciever'; 
import { MessageSender } from '../components/MessageSender'; 
import { Separator , SeparatorDate } from '../components/List'; 


class ChatMessageScreen extends Component { 
    render() { 
    return (
     <Container> 

      <Header/> 

     <Content> 


      <MessageReciever /> 
      <MessageSender /> 


     </Content> 
     </Container> 
    ); 
    } 
} 

export default ChatMessageScreen; 

Das Problem, das ich mit Blick auf nenne ich, wenn ich diese beiden Komponenten in der Render-Methode nenne nur eine Komponente entweder gerendert wird MessageReceiver oder MessageSender, der zuerst aufgerufen wird.

Ich bin nicht in der Lage, das Problem zu verstehen, also bitte sehen Sie und helfen Sie mir.

Answer 1

Ich habe meinen Fehler tatsächlich in der Render-Funktion von Komponenten Ich wickle den Inhalt in den Container, so dass es gesamten Bildschirm Platz nimmt, so wenn ich diese Komponenten in meinem Bildschirm aufrufen wird es Rendern dieser Komponente aber jedes mit gerendert der Raum des gesamten Bildschirms zwischen zwei Komponenten. Also nur Container aus den Komponenten entfernt und alles funktioniert einwandfrei.