Question

我在react native中启动了一个聊天项目。现在我在显示表情符号时遇到问题。我得到消息数据，将其提取并保存到数组。这是消息及其数组的示例

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>

我该怎么办？谢谢！

Answer 1

您的文本组件可能如下所示：

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>

您需要对代码进行一些修改以适合您的需求，但是从根本上讲，这应该使处理这种情况更容易。

如何在React Native中呈现文本组件内部的组件数组？

1 个答案: