Можно ли прикрепить контейнер веб-просмотра React-Native к фону, чтобы он не двигался?

Question

У меня есть собственный контейнер веб-просмотра React, и я бы хотел, чтобы он оставался на месте при прокрутке после конца представления, в тот момент, когда весь вид перемещается и пробелы открываются. Возможно ли это?

Answer 1

Некоторое время назад я пытался что-то подобное, и я нашел обходной путь, и, вероятно, это поможет вам.

На <WebView/> есть реквизит injectedJavaScript , который будет вставлен в веб-страницу при загрузке представления, поэтому вы можете добавить этот код:

document.createElement('meta');
meta.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0');
meta.setAttribute('name', 'viewport');
document.getElementsByTagName('head')[0].appendChild(meta);

, а затем добавьте его в свой проект. Проверьте закуски, которые я создал snack.expo.io/@abranhe/stackoverflow-56858778

Исходный код:

import React from 'react';
import { View, WebView, StyleSheet } from 'react-native';

const disableZoom = `const meta = document.createElement('meta');
                    meta.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0');
                    meta.setAttribute('name', 'viewport');
                    document.getElementsByTagName('head')[0].appendChild(meta);`;

export default () => (
  <View style={styles.container}>
    <View style={styles.webview}>
      <WebView
        useWebKit={true}
        source={{ url: 'https://google.com' }}
        injectedJavaScript={disableZoom}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100%',
    marginTop: 30,
  },
  webview: {
    width: '100%',
    height: '100%',
  },
});

Надеюсь, это работает для вас!