无法在React Native中渲染组件

我想在react native中创建一个聊天应用程序，目前正在设计静态聊天屏幕，其外观应如下所示。

所以我要制作这种聊天屏幕是要制作两个单独的组件，即消息发送者和消息接收者

这是我的MessageReciever组件

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;

这是我的MessageSender组件

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;

这是我的主聊天屏幕，我在其中调用render方法中的这两个组件

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;

我面临的问题是，当我在render方法中调用这两个组件时，仅一个组件被呈现为MessageReciever或首先被调用的MessageSender。

我无法理解该问题，因此请查看并帮助我。