Раздельный стиль текста с помощью стилизованных компонентов в React native - PullRequest
Новая
       8

Раздельный стиль текста с помощью стилизованных компонентов в React native

0 голосов
/ 16 января 2020

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

return(
     <Container>
     <TouchableOpacity onPress={fetchDogPhotos}> 
     <Text>Tap the screen for new dog</Text>
      <View>
         {photos.map((photo) => (
           <View key={photo.id}>
           <Image
             resizeMode="contain"
             source={{uri: photo.url}}
             style={{width: 300, height: 600}} 
             />  
             <Text>{photo.breeds[0].name}</Text>
             <Text>{photo.breeds[0].temperament}</Text> 
          </View>
         ))}
      </View> 
      </TouchableOpacity>    
    </Container>
    );

Я хочу иметь возможность стилизовать Касание экрана для новой собаки и {photo.breeds [0] .name} {photo.breeds [0 ] .temperament} но я хочу их стилизовать отдельно.

Теперь мой стиль выглядит следующим образом (wisch ориентирован на обе области текста) 

const Container = styled.View`
  flex: 1;
  background-color: white;
  align-items: center;
  justify-content: center;
  text-align: center;
`

Кто-нибудь знает, как мне написать код чтобы он создавал какое-то «className» или другой идентификатор для другой текстовой части, чтобы я мог нацелить текст отдельно? А также как написать, что правильно в стилизованных компонентах? :)

Заранее спасибо!

1 Ответ

1 голос
/ 16 января 2020

Вы можете оформить каждый текст отдельно 

const TapText= styled.text`
 ...style
`

const NameText= styled.text`
 ...style
`

const TemperamentText= styled.text`
 ...style
`

<Container>
 <TouchableOpacity onPress={fetchDogPhotos}> 
 <TapText>Tap the screen for new dog</TapText>
  <View>
     {photos.map((photo) => (
       <View key={photo.id}>
       <Image
         resizeMode="contain"
         source={{uri: photo.url}}
         style={{width: 300, height: 600}} 
         />  
         <NameText>{photo.breeds[0].name}</NameText>
         <TemperamentText>{photo.breeds[0].temperament}</TemperamentText> 
      </View>
     ))}
  </View> 
  </TouchableOpacity>    
</Container>
...