在 react native 中转换 CSS

Posted 2023-02-16

【中文标题】在 react native 中转换 CSS

【英文标题】：Convert CSS in react native

【发布时间】：2021-12-28 07:22:08

【问题描述】：

如何将 CSS 转换为在 react native 实现中执行以下操作？

.parent.parent-1 .sub-class-1 
  background: yellow;


.parent.parent-2 .sub-class-1, .parent.parent-2 .sub-class-2 
  background: red;
 

<div class="parent parent-1">
  <div class="sub-class-1">Test1</div>
  <div class="sub-class-2">Test2</div>
</div>

【参考方案1】：

您可以将div 视为View，然后为样式创建样式表，所以-

import  StyleSheet, View, Text  from 'react-native';

const styles = StyleSheet.create(
  parent: 
    backgroundColor: 'yellow',
  ,
  subClass: 
    backgroundColor: 'red'
  ,
);

<View style=styles.parent>
   <View style=styles.subClass><Text>Text1</Text</View>
   <View style=styles.subClass><Text>Text2</Text</View>
</View>

免责声明 - 我不太确定你的 CSS 是否正确，我看不出你在哪里使用 'parent-2' 所以我只是假设一个简单的例子

【参考方案2】：

你可以使用styled-components：

示例：

export const Container = styled.View`
  height:10px;
  width:20px;
  flex-direction:row;
  background-color:null;
`

用途：

将您的视图或子视图包装在如下所示的容器中：

<Container>
   //...rest of your code
</Container>

参考链接：

styled-components with React Native

styled-components