Response-native: многоцветный текстовый вид

Я хочу сделать одну строку текста несколькими словами, выделенными другим цветом.

Я бы идеально сделал это с тегом span с реакцией.

Интересно, как я буду делать то же самое с реагированием-native?

Ответы

Ответ 1

Вы можете добиться этого, используя вложенные компоненты Text

<Text style={{color: 'blue'}}>
    I am blue
    <Text style={{color: 'red'}}>
        i am red
    </Text>
    and i am blue again
</Text>

Здесь ссылка в документации, объясняющей это лучше

Ответ 2

Вы можете сделать это лучше, мой путь:

CText = (props) => <Text style={{color: props.color}}>{props.children}</Text>

внутри рендера добавить:

const CText = this.CText

и вернуться

<Text>I am <CText color={'red'}>Blue color</CText> and <CText color={'blue'}>Blue color</CText></Text>