在 React native 中使用带样式的组件分离文本样式

Question

我正在使用 react-native 和样式化组件开发一个应用程序，我想让文本在图像下方可见。我的 return 的代码如下所示：

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" 或其他标识符，以便我可以单独定位文本？还要在带样式的组件中正确编写它吗？ :)

提前致谢！

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>

在 React native 中使用带样式的组件分离文本样式

Separate text-styling with styled components in React native

react-native

styled-components