在React本机中使用样式组件单独设置文本样式

Question

我正在使用react-native和styled组件做一个应用程序，我想让文本在图像下可见。我返回的代码是这样的:

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}{photos.breeds[0].letrich}的点击屏幕设置样式，但我想分别设置它们的样式。

现在我的样式看起来像这样（wisch针对两个文本区域）

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

有人知道如何编写代码，让它为不同的文本部分创建某种“类名”或其他标识符，以便我可以分别针对不同的文本吗？并且如何在样式化的组件中正确地编写呢？:)

提前感谢！

Answer 1

您可以单独设置每个文本的样式

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>