Question

我想像在其他CSS项目中一样使用rems进行样式设置。但是我不明白如何使它工作。这似乎根本不起作用。

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

}）;

Answer 1

是的，可以！使用this npm程序包，您可以轻松完成。

STEPS

运行npm i react-native-extended-stylesheet --save
使用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>
    );
  }
}

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

1 个答案: