是否可以将React-Native Webview容器附加到背景，以使其不会移动？

Question

我有一个React本机webview容器，当滚动到视图的末尾时，我希望它保持在原处，此刻整个视图移动并显示空白。这可能吗？

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%',
  },
});

希望这对您有用！