React-natywny: widok tekstu wielobarwnego

Chcę renderować pojedynczą linię tekstu z wybranymi słowami w innym kolorze.React-natywny: widok tekstu wielobarwnego

Najlepiej byłoby to zrobić za pomocą znacznika zakresu z reakcją.

Zastanawiasz się, jak zrobiłbym to samo z reakcją natywną?

2015-03-31 Chirag Jain

Można to osiągnąć za pomocą zagnieżdżonych elementów tekstowych

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

Oto link z dokumentacją tłumacząc to lepiej

Źródło

2015-03-31 15:49:57 mttcrsp

Co jeśli masz dynamiczny tekst? Wyobraź sobie, że tekst pochodzi z serwera z niektórymi symbolami zastępczymi oznaczającymi, że klient powinien wyróżnić. –

To dość szczegółowe, więc nie jest domyślnie dostarczane. Jednak nie powinno to być trudne. Spróbuj napisać określoną funkcję, która analizuje ciąg znaków z serwera i wysyła obiekt zawierający style, które mają być zastosowane do każdego podciągu. Następnie możesz przekazać ten obiekt do niestandardowego komponentu, który renderuje zagnieżdżone komponenty tekstowe, takie jak ten powyżej. – mttcrsp

Ya. To ma sens. –

React-natywny: widok tekstu wielobarwnego

Odpowiedz

Powiązane problemy