在 react native 中转换 CSS答案

【问题标题】：Convert CSS in react native在 react native 中转换 CSS
【发布时间】：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>

【问题讨论】：

标签： html css react-native

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

【讨论】：