在 React Native 中将文本样式与样式化组件分开答案

【问题标题】：Separate text-styling with styled components in React native在 React Native 中将文本样式与样式化组件分开
【发布时间】：2020-05-03 08:56:42
【问题描述】：

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

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;
`

有谁知道如何编写代码，以便为不同的文本部分创建某种“类名”或其他标识符，以便我可以单独定位文本？并且还要在样式化的组件中正确地编写它？ :)

提前致谢！

【问题讨论】：

标签： react-native styled-components

【解决方案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>

【讨论】：

谢谢它有帮助！ :)