В 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} />