android - 如何通过下拉刷新Expo Webview中的页面？

Question

我用 Expo 制作了 Webview 应用，React-Native 看 youtube。

一开始我做了这样的基本应用程序

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView 
    source={{ uri: 'https://www.google.com' }} 
    allowsFullscreenVideo={true} 
    allowsBackForwardNavigationGestures={true}
    style={{ marginTop: 20 }} />;
  }
}

在 Android apk 中，“goBack”按钮不起作用。如果我触摸它，应用程序就会关闭。但我想回到最后一页。

所以我改成这样:

import * as React from 'react';
import {Component} from 'react';
import {View,BackHandler,Platform} from 'react-native';
import {WebView} from 'react-native-webview';

export default class App extends Component {
  constructor(props) {
    super(props);
  }
  webView = {
    canGoBack: false,
    ref: null,
  }

  onAndroidBackPress = () => {
    if (this.webView.canGoBack && this.webView.ref) {
      this.webView.ref.goBack();
      return true;
    }
    return false;
  }

  UNSAFE_componentWillMount() {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
    }
  }

  UNSAFE_componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress');
    }
  }

  render() {
    return (
      <View style={{flex:1}}>
        <WebView
          ref={(webView) => { this.webView.ref = webView; }}
          onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
          automaticallyAdjustContentInsets={false}
          source={{ uri: 'https://www.google.com' }}
          allowsFullscreenVideo={true}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true}
          style={{marginTop: 25}}
        />
    </View>
    )
  }
}

后退按钮终于起作用了。如果我触摸它，我会移到最后一页。

但我意识到这个 Webview 应用程序无法刷新页面所以我搜索了3天。这就是我所期望的功能。在此链接中，您可以在下拉页面时看到圆形箭头。 https://reactnative.dev/docs/refreshcontrol?redirected

所以我混合了代码，但它不起作用

import * as React from 'react';
import {Component} from 'react';
import {WebView} from 'react-native-webview';
import {
  ScrollView,View,BackHandler,Platform,
  RefreshControl,
  StyleSheet,
  Text,
  SafeAreaView,
} from 'react-native';
import Constants from 'expo-constants';


function wait(timeout) {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
}

export default class App extends Component {
    
    
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);

  constructor(props) {
    super(props);
  }
  webView = {
    canGoBack: false,
    ref: null,
  }

  onAndroidBackPress = () => {
    if (this.webView.canGoBack && this.webView.ref) {
      this.webView.ref.goBack();
      return true;
    }
    return false;
  }

  UNSAFE_componentWillMount() {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
    }
  }

  UNSAFE_componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress');
    }
  }

  render() {
    return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        <WebView
          ref={(webView) => { this.webView.ref = webView; }}
          onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
          automaticallyAdjustContentInsets={false}
          source={{ uri: 'https://www.google.com' }} 
          allowsFullscreenVideo={true}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true}
          style={{marginTop: 25}}
        />
      </ScrollView>
    </SafeAreaView>
    )
  }
}

这是错误信息..

Error: /workspace/Human_Impact/App.js: Unexpected token (23:8)

  21 |
  22 |
> 23 |   const [refreshing, setRefreshing] = React.useState(false);
     |         ^
  24 |
  25 |   const onRefresh = React.useCallback(() => {
  26 |     setRefreshing(true);
Failed building JavaScript bundle.

• 结论:我需要这些功能

1. 如果我触摸 Android 硬件返回按钮一次，转到返回页面，在很短的时间内两次，结束应用程序。 (安卓)
2. 如果我下拉，则刷新网页。 (iOS/Android 两者)

Answer 1

首先，您可以为ScrollView和WebView添加样式:

container: {
  position : 'relative',
},
ScrollStyle: {
 backgroundColor : 'white',
 position: 'relative',
}

然后，渲染您的 ScrollView 和 WebView:

<View style={{flex: 1}}>
    <ScrollView
        style = {styles.ScrollStyle}
        contentContainerStyle={{flex: 1}}
        refreshControl={
            <RefreshControl
              refreshing={false}
              onRefresh={this.yourFunctionReload} // exl in function : this.yourWebview.reload();
            />
        }>
        <Header />  
        <WebView
          style={styles.container}
            .....
         />
    </ScrollView>
</View>

注意:不要忘记导入View、ScrollView、RefreshControl和WebView