Question

我想以原生的方式制作一个聊天应用程序。目前我正在设计静态聊天屏幕，它应该是这样的。

所以我正在做的这种聊天屏幕是我正在制作两个独立的组件Message Sender和Message Reciever

这是我的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;

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

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，它首先被调用。

我无法理解这个问题所以请看看并帮助我。

Answer 1

我注意到我的错误实际上在组件的渲染功能中我将内容包装在容器内，因此它占用了整个屏幕空间，所以当我在屏幕内调用这些组件时，它会渲染该组件但每次都使用两个组件之间的整个屏幕空间。所以只需从组件中删除容器，一切正常。

无法在react Native中渲染组件

1 个答案: