我们可以使用 rems 在 React Native 中设置组件的样式吗

Question

rem我想像通常在其他 CSS 项目中那样使用s 进行样式设置。但我不明白如何让它发挥作用。这似乎根本不起作用。

const styles = StyleSheet.create({
  header: {
    fontSize: 3rem,
    fontWeight: 400
  }
});

Answer 1

是的你可以！使用这个npm 包你可以轻松做到。

脚步

1. 跑步npm i react-native-extended-stylesheet --save
2. 使用而不是定义EStyleSheet.create()样式StyleSheet.create():

简单的例子：

/* component.js */
import EStyleSheet from 'react-native-extended-stylesheet';

// define extended styles 
const styles = EStyleSheet.create({
  column: {
    width: '80%'                                    // 80% of screen width
  },
  text: {
    color: '$textColor',                            // global variable $textColor
    fontSize: '1.5rem'                              // relative REM unit
  },
  '@media (min-width: 350) and (max-width: 500)': { // media queries
    text: {
      fontSize: '2rem',
    }
  }
});

// use styles as usual
class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.column}>
        <Text style={styles.text}>Hello</Text>
      </View>
    );
  }
}