是否可以在后台附加一个 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/Whosebug-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%',
  },
});

希望这对你有用！

是否可以在后台附加一个 React-Native webview 容器，使其不动？

Is it possible to attach a React-Native webview container to the background, so that it does not move?

webview

react-native