У меня есть вопрос о дизайне экрана в React Native. < /p>
Я строю приложение с выставкой. Он работает на моем эмуляторе - Nexus 5x. Когда я беру свое настоящее устройство - Samsung S9, страницы выглядят по -разному, например, текст слева и вправо вырезаны, потому что экран кажется слишком маленьким. Тем не менее, оба устройства имеют одинаковую ширину 72 мм и 69 мм, но S9 изогнут. Как вы, ребята, сохраняете свои приложения отзывчивыми? Должен ли я сделать то же самое для ширины? Или я должен использовать, например, пакет реагирующих экран, реагирующий на себя? Если есть несколько более опытных RN-DEV, пожалуйста, дайте мне быстрый совет о том, как вы на самом деле управляете этим. Это моя таблица стилей, и я попытался работать с абсолютной позицией, которая выглядит красиво на эмуляторе, но я думаю, что это не хорошая практика. Должен ли я переписать стили? < /P>
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center"
},
headerText: {
fontSize: 30,
color: "black"
},
DateContainer: {
marginTop: 10,
marginBottom: 10
},
DateText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 14,
left: -100
},
phaseButton: {
position: "absolute",
top: -42,
right: -95,
height: 30,
backgroundColor: "#a51717",
borderRadius: 45
},
checkbox: {
position: "absolute",
top: -5,
right: -180,
height: 30
},
ZeitText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 12,
left: -199.5
},
ZeitInput: {
position: "absolute",
left: -150,
top: 8,
width: 100,
height: 35,
borderWidth: 1,
textAlign: "center"
},
checkText: {
position: "absolute",
top: 12,
right: -115,
height: 30,
color: "black"
},
button1: {
position: "absolute",
left: -120,
top: 8,
height: 30,
marginHorizontal: 20,
backgroundColor: "#a51717"
},
button2: {
position: "absolute",
left: -60,
top: 8,
height: 30,
backgroundColor: "#a51717"
}
});
< /code>
Edit2.0: я изменил свои абсолютные позиции на FlexDirection: ряд и ширина на процент. Кнопка, которая требует ширины: «30%» отзывчива? Так всегда требуется 30% места?
Подробнее здесь: https://stackoverflow.com/questions/621 ... ive-screen
Реагировать на Native Adpractive Screen ⇐ Android
Форум для тех, кто программирует под Android
1740469007
Anonymous
У меня есть вопрос о дизайне экрана в React Native. < /p>
Я строю приложение с выставкой. Он работает на моем эмуляторе - Nexus 5x. Когда я беру свое настоящее устройство - Samsung S9, страницы выглядят по -разному, например, текст слева и вправо вырезаны, потому что экран кажется слишком маленьким. Тем не менее, оба устройства имеют одинаковую ширину 72 мм и 69 мм, но S9 изогнут. Как вы, ребята, сохраняете свои приложения отзывчивыми? Должен ли я сделать то же самое для ширины? Или я должен использовать, например, пакет реагирующих экран, реагирующий на себя? Если есть несколько более опытных RN-DEV, пожалуйста, дайте мне быстрый совет о том, как вы на самом деле управляете этим. Это моя таблица стилей, и я попытался работать с абсолютной позицией, которая выглядит красиво на эмуляторе, но я думаю, что это не хорошая практика. Должен ли я переписать стили? < /P>
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center"
},
headerText: {
fontSize: 30,
color: "black"
},
DateContainer: {
marginTop: 10,
marginBottom: 10
},
DateText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 14,
left: -100
},
phaseButton: {
position: "absolute",
top: -42,
right: -95,
height: 30,
backgroundColor: "#a51717",
borderRadius: 45
},
checkbox: {
position: "absolute",
top: -5,
right: -180,
height: 30
},
ZeitText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 12,
left: -199.5
},
ZeitInput: {
position: "absolute",
left: -150,
top: 8,
width: 100,
height: 35,
borderWidth: 1,
textAlign: "center"
},
checkText: {
position: "absolute",
top: 12,
right: -115,
height: 30,
color: "black"
},
button1: {
position: "absolute",
left: -120,
top: 8,
height: 30,
marginHorizontal: 20,
backgroundColor: "#a51717"
},
button2: {
position: "absolute",
left: -60,
top: 8,
height: 30,
backgroundColor: "#a51717"
}
});
< /code>
Edit2.0: я изменил свои абсолютные позиции на FlexDirection: ряд и ширина на процент. Кнопка, которая требует ширины: «30%» отзывчива? Так всегда требуется 30% места?
Подробнее здесь: [url]https://stackoverflow.com/questions/62188420/react-native-responsive-screen[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия