【react native】css踩坑记录

在React Native中，CSS样式的处理方式与Web开发中的CSS有所不同。React Native使用的是称为StyleSheet的样式表，它需要预先定义在组件中使用。以下是一些常见的问题和解决方案：

1. 样式不生效：确保你已经正确地将样式定义在StyleSheet.create中，并且在组件的style属性中引用了它。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
const App = () => (
  <View style={styles.container}>
    <Text style={styles.text}>Hello, World!</Text>
  </View>
);
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'blue',
    fontSize: 20,
  },
});
 
export default App;

2. 不支持CSS选择器：React Native的StyleSheet不支持CSS选择器，每个样式都必须单独指定。
3. 样式属性不生效：检查样式属性是否支持在当前平台。例如，某些样式属性可能只在Web上有效，或者在React Native的某个特定版本才被支持。
4. 样式覆盖问题：React Native中的样式继承和覆盖比较复杂，特别是在处理嵌套组件时。确保每个组件都有唯一的样式对象。
5. 相对单位问题：React Native支持像px这样的固定单位，但通常建议使用灵活的动态单位如%, rem, em, 或ex。
6. 使用第三方库时的样式冲突：如果你在使用第三方UI库，那么可能会遇到样式冲突的问题。确保你的样式优先级高于第三方库的样式，或者使用样式覆盖的功能。
7. 动态样式：React Native不支持类似CSS的伪类和媒体查询，动态样式需要使用JavaScript来处理。
8. 性能问题：在渲染大型列表时，避免使用内联样式，因为每个使用内联样式的组件都会导致应用程序的样式重新计算。

如果遇到问题，可以使用React Native的开发者菜单中的Debug JS Remotely功能，利用Chrome开发者工具来调试JavaScript代码和样式。