Как сделать массив компонента внутри компонента Text в реагировать родной?

Question

Как сделать массив компонента внутри компонента Text в реагировать родной?

1

Я начал проект чата в ответ на родной. И теперь у меня проблема с показом эможи. Я получил данные сообщения, извлеките его и сохраните в массив. Это пример сообщения и его массив

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>

Как мне это сделать? Спасибо!

Ngo Kim Huynh 26 окт. 2018, в 12:56

Источник

0

Я не думаю, что вы можете сделать это по-родному.
Lukasz 26 окт. 2018, в 10:32
0

почему вы не используете npmjs.com/package/react-native-gifted-chat
Mahgol Fa 26 окт. 2018, в 10:42

Теги:

javascript

react-native

1 ответ

Ещё вопросы

Я не думаю, что вы можете сделать это по-родному.
почему вы не используете npmjs.com/package/react-native-gifted-chat

Sandro Schaurer · Answer 1 · 2018-10-26T08-14-00.000Z

ваш текстовый компонент может выглядеть так:

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>

Вам нужно внести некоторые изменения в свой код, чтобы он соответствовал вашим потребностям, но в основном это должно облегчить обработку ситуации.