React Native - рендеринг проблем с CSS Webview ⇐ Android

[Anonymous]

У меня следующая проблема с рендерингом некоторых сайтов с помощью WebView:


Но это результат любого продукта Chrome, и это то, что мне нужно:



А пробовал много чего:

• Понижение и обновление веб-представления
• заголовки
• активировать/деактивировать пароль ускорения
• activa js , дом
• удаление кэш и т. д.

Код моего экрана:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const Main_Screen = () => {
return (

);
};

export default Main_Screen;

Вопрос

[*]Как я могу получить одинаковый результат для любого продукта?
< /ol>
Даже веб-просмотр неправильно загружает цвет акцента для выбора флажка.
Это код моего сайта:





Modal B Sheet









Bottom Sheet Modal
Create a bottom sheet modal that functions similarly to Fact

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsum
quidem quam sed nisi autem, ratione repudiandae magnam. Itaque
sapiente doloremque qui quam? Vitae fugiat, unde hic illum labore
architecto.








* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Urbanist", sans-serif;
}

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #e3f2fd;
}

.gc-core-bottom-sheet {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
opacity: 0;
pointer-events: none;
flex-direction: column;
justify-content: end;
align-items: center;
transition: 0.1s linear;
}

.gc-core-bottom-sheet.show {
opacity: 1;
pointer-events: none;
}

.gc-core-bottom-sheet .gc-core-content-sheet {
background: #fff;
height: 50vh;
max-height: 100vh;
padding: 25px 30px;
width: 100%;
max-width: 1100px;
border-radius: 12px 12px 0 0;
position: relative;
transform: translateY(100%);
transition: 0.3s ease;
}

.gc-core-bottom-sheet.show .gc-core-content-sheet {
transform: translateY(0%);
}

.gc-core-bottom-sheet .gc-core-bottom-sheet-content {
overflow-y: auto;
height: 100%;
padding: 15px 0 40px;
scrollbar-width: none;
}

.gc-core-bottom-sheet .gc-core-bottom-sheet-content::-webkit-scrollbar {
width: 0;
}

.gc-core-bottom-sheet .gc-core-bottom-sheet-content h2 {
font-size: 1.8rem;
}

.gc-core-bottom-sheet .gc-core-bottom-sheet-content p {
font-size: 1.05rem;
margin-top: 20px;
}


const bottomSheet = document.querySelector(".gc-core-bottom-sheet");
const sheetContent = bottomSheet.querySelector(".gc-core-content-sheet");

let isDragging = false,
startY,
startHeight;

const showBottomSheet = () => {
bottomSheet.classList.add("show");
document.body.style.overflowY = "hidden";
updateSheetHeight(140); /* altura inicial */
};

const updateSheetHeight = (height) => {
sheetContent.style.height = `${height}px`;
bottomSheet.classList.toggle(height === 100); /* para redondear bordes en full screen */
};

const hideBottomSheet = () => {
// bottomSheet.classList.remove("show");
document.body.style.overflowY = "auto";
};

const dragStart = (e) => {
isDragging = true;
startY = e.pageY || e.touches?.[0].pageY;
startHeight = parseInt(sheetContent.style.height);
bottomSheet.classList.add("dragging");
};

const dragging = (e) => {
if (!isDragging) return;
const delta = startY - (e.pageY || e.touches?.[0].pageY);
const newHeight =
startHeight + (delta / window.innerHeight) * 100; /* sensibilidad */
updateSheetHeight(newHeight);
};

const dragStop = () => {
isDragging = false;
bottomSheet.classList.remove("dragging");
const sheetHeight = parseInt(sheetContent.style.height);
sheetHeight < 55
? hideBottomSheet()
: sheetHeight > 15
? updateSheetHeight(100) /* al arrastrar hacia arriba */
: updateSheetHeight(20); /* al arrastrar hacia abajo */
};

showBottomSheet();



Подробнее здесь: https://stackoverflow.com/questions/792 ... -rendering