2
私は反応ネイティブでチャットアプリを作りたいと思います。現在、このように見える静的なチャット画面をデザインしています。私は、私は2つの別々のコンポーネントのメッセージの送信者とメッセージレシーバは反応中のコンポーネントをレンダリングできませんネイティブ
これは私の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;
最初に呼び出されるMessageRecieverまたはMessageSender。
私はこの問題を理解することができませんので、見て助けてください。