WebView (диаграмма просмотра торговли) Конфликт прокрутки в React Native (Android) ⇐ IOS

[Anonymous]

Я встраиваю диаграмму TradingView в реагирующий веб-представление.
Диаграмма отображается и отлично работает с жестами масштабирования/панорамирования, но возникает проблема с прокруткой:
Когда пользователь пытается прокрутить весь экран (например, родительский ScrollView), начиная с области диаграммы, экран не перемещается — касание «застревает» в WebView.
Я столкнулся с проблемой с графиком TradingView, который отображается в React-native-webview. Сама диаграмма загружается и работает правильно для масштабирования и панорамирования, но когда пользователь пытается прокрутить весь экран, начиная свайп из области WebView, жест прокрутки не распространяется — экран «застревает» и не двигается. Это происходит только тогда, когда жест начинается внутри диаграммы; если пользователь начинает прокручивать с другой части экрана, все работает нормально. Похоже, что WebView перехватывает все жесты касания и прокрутки, не позволяя родительскому ScrollView или основному макету обрабатывать их. Проблема проявляется только на Android. По сути, мне нужен способ, позволяющий пользователям плавно взаимодействовать с диаграммой, сохраняя при этом возможность прокручивать весь экран, даже если их пролистывание начинается в области WebView.
вот мой код, как я использую веб-представление:

Код: Выделить всё

import WebView from 'react-native-webview';
import { StyleSheet, View, Platform, NativeModules } from 'react-native';
import { borderRadius, spacing, ThemeType } from '../../theme';
import { useTheme } from '../../data/providers/ThemeProvider';
import { mergeDataMarketListCandle } from '../../services/api/listing/listing';
import { useEffect } from 'react';
import { useDxTradeSession } from '../../data/providers/DxTradeSessionProvider.tsx';
import { useSelectedAccountProvider } from '../../data/providers/selectedAccountProvider.tsx';

type ChartURLs = { html: string; folder: string };

type Props = {
item: mergeDataMarketListCandle;
disableAnimation?: boolean;
animationThresholdPct?: number;
};
type LocalWebProps = { uri: ChartURLs; theme: ThemeType; symbol: string };

export const TradingChartWebView = React.memo(function LocalWeb({ uri, theme, symbol }: LocalWebProps) {
const styles = useStyles(theme);
const { sessionToken } = useDxTradeSession();
const { accountNumber } = useSelectedAccountProvider();
const webSource = React.useMemo(() => {
if (!uri) return null;
return {
uri: `${uri.html}?symbol=${encodeURIComponent(symbol)}&&sessionToken=${encodeURIComponent(sessionToken!)}&&account=${accountNumber}`,
};
}, [sessionToken, symbol, uri]);

return (

 true}
onMessage={event => {
try {
const { type, message } = JSON.parse(event.nativeEvent.data);
// console[type]?.(`[WebView ${type}]`, message);
} catch (e) {
console.log('[WebView]', event.nativeEvent.data);
}
}}
scrollEnabled={false}
bounces={false}
startInLoadingState
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
overScrollMode="never"
nestedScrollEnabled
scalesPageToFit={Platform.OS === 'android' ? false : true}
automaticallyAdjustContentInsets={false}
useWebKit={true}
javaScriptEnabled={true}
/>

);
});

function InstrumentTradingView(props: Props) {
const { item } = { ...props };
const { theme } = useTheme();
const [urls, setUrls] = React.useState(null);

useEffect(() => {
if (Platform.OS === 'ios') {
NativeModules.BundlePath.chartHTMLURLs()
.then((u: ChartURLs) => setUrls(u))
.catch((e: any) => console.warn('chartHTMLURLs error:', e));
} else {
setUrls({
html: 'file:///android_asset/charting_library/index.html',
folder: 'file:///android_asset/charting_library',
});
}
}, []);

return urls && ;
}

export default InstrumentTradingView;

const useStyles = (theme: ThemeType) =>
StyleSheet.create({
webView: {
flex: 1,
marginTop: 20,
backgroundColor: 'red',
paddingHorizontal: Platform.OS === 'android' ? spacing.md : 0,
},
webStyle: {
flex: 1,
height: 400,
padding: 20,
paddingBottom: 0,
backgroundColor: 'transparent',
borderRadius: borderRadius.xxl,
},
});

отображение графика торговли. все необходимое для этой библиотеки установлено и, кажется, все в порядке.
Я обнаружил, что это распространенная проблема с React-native-webview, особенно внутри прокручиваемых контейнеров React Native (таких как настройки ScrollView, FlatList или PanResponder). События касания часто «украдены» родительским представлением до того, как WebView сможет их обработать.
есть ли решение для этой проблемы?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ve-android