Можем ли мы использовать rems для стилизации компонента в реагировать на нативный

Question

Я хотел использовать rems для стилизации, как обычно в других CSS проектах. Но я не понимаю, как заставить это работать. Кажется, это не работает вообще.

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

});

Answer 1

Да, вы можете! Используя этот npm пакет, вы можете легко это сделать.

ШАГИ

1. run 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>
    );
  }
}