Как показать текст и изображения в одну строку в реагировать родной, используя реагировать родной рендер html? - PullRequest
Новая
       3

Как показать текст и изображения в одну строку в реагировать родной, используя реагировать родной рендер html?

1 голос
/ 29 февраля 2020

Я хочу показать изображения и текст в одну строку, но это не работает, как это сделать. все содержимое поступает в одну html строку из backend.im с использованием команды native native render html для этого, чтобы визуализировать текст следующим образом.

строка такая же из внутреннего интерфейса. -> "<p>Testing long messages with Text<img width="25" height="25" src="https://node.whizbite.com/media/emoji/png/emoji-32.png" +="" class="emojiHeight24 margin_right3"><img width="25" height="25" src="https://node.whizbite.com/media/emoji/png/emoji-31.png" +="" class="emojiHeight24 margin_right3"><img width="25" height="25" src="https://node.whizbite.com/media/emoji/png/emoji-30.png" +="" class="emojiHeight24 margin_right3">" 

                          <HTML
                              baseFontStyle={{
                                color: '#555555', 
                                fontSize: moderateScale(15),
                                fontWeight: '400', 
                                textAlign: 'left',
                              }}

                              containerStyle={{
                                marginLeft: 0,
                                marginRight: 10,
                                color:'#555555',
                                fontWeight: '400', 
                                textAlign: 'left',
                                flexDirection:'row',
                                paddingEnd: 10,
                              }}
                              html={item.message}
                             />

Ответы [ 2 ]

2 голосов
/ 29 февраля 2020

Вы можете указать стиль, используя реквизиты tagsStyles и classesStyles для каждого тега или класса html. Следующий код является примером использования этого реквизита: 

<HTML
   html={item.message}
   tagsStyles={{
      p: {
          fontSize: 22,
          lineHeight: 30,
          marginBottom: 0
      },
      img: {
          ...
      }
   }}
   classesStyles={{
      'custom-image': { 
           ... 
      } 
   }}
   ignoredStyles={['line-height']} />
0 голосов
/ 29 февраля 2020

с tagsStyles реквизитом вы можете сделать это

enter image description here

вот пример кода 

<HTML
html={item.message}
tagsStyles={{
          img: {
            flexDirection: 'row',
          },
          p: {
            flexDirection: 'row',
          },
        }}
/>

здесь это объяснение

...