Я начал проект чата в ответ на родной. И теперь у меня проблема с показом эможи. Я получил данные сообщения, извлеките его и сохраните в массив. Это пример сообщения и его массив
abc :smile: xyz
[
<Text>abc </Text>,
<Image source={{uri:"SMILE_EMOJI_URL"}} />
<Text> xyz</Text>
]
Я создам текстовый тег и поместил бы их в виде вложенных тегов, поэтому мне просто нужно форматировать один раз. Мой ожидаемый результат
<Text style={MY_STYLE}>
<Text>abc </Text><Image source={{uri:"SMILE_EMOJI_URL"}} /><Text> xyz</Text>
</Text>
Как мне это сделать? Спасибо!
ваш текстовый компонент может выглядеть так:
class ChatMessage extends React.Component {
constructor() {
super();
this.state = {
message: ""
}
}
componentWillMount() {
var localMessage;
for (let i = 0; i < arrayOfEmojiCodes.length; i++) {
if (this.props.message.includes(arrayOfEmojiCodes[i])) {
localMessage = this.props.message.split(arrayOfEmojiCodes[i])[0] + " <img src='"+arrayOfIconImages[arrayOfEmojiCodes[i]]+"' /> " + this.props.message.split(arrayOfEmojiCodes[i])[1];
i = arrayOfEmojiCodes.length;
} else {
localMessage = this.props.message;
}
}
this.setState({message: localMessage});
}
render() {
return(
<div className={this.props.style}>
<p>{this.state.message}</p>
</div>
);
}
}
то вы можете просто назвать это:
<div className="chat">
{['Message1 :smile', 'message2'].map((value, index) => {
<ChatMessage key={index} message={value} />
})}
</div>
Вам нужно внести некоторые изменения в свой код, чтобы он соответствовал вашим потребностям, но в основном это должно облегчить обработку ситуации.