В React Native есть несколько действительно полезных помощников для объекта StyleSheet
.
absoluteFill
absoluteFill
- это простой способ установить полноэкранный режим просмотра с абсолютным позиционированием. Это короткий путь для:
{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }
Используйте его, чтобы расширить другие стили следующим образом:
const styles = StyleSheet.create({ container: { backgroundColor: 'red' } }); <View style={[StyleSheet.absoluteFill, styles.container]} />
absoluteFillObject
Скажем, вы хотите позиционировать свое представление в абсолютном положении, но уменьшите его на 20 пикселей, чтобы сместить строку состояния (например).
Вы можете добавить StyleSheet.absoluteFillObject
в свой стиль, а затем переопределить одно из его значений.
const styles = StyleSheet.create({ container: { ...StyleSheet.absoluteFillObject, top: 20, backgroundColor: 'red' } }); <View style={styles.container} />
ширина волос
Также есть помощник для рисования тонких линий. Например, на устройстве iOS с дисплеем Retina 2x будет отображаться 0.5px
строка. Но на дисплее 1x это будет 1px
.
const styles = StyleSheet.create({ container: { borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth } }); <View style={styles.container} />