21

我想在 ScrollView 中使用 WebView 来处理我的本机应用程序。但如果我这样做，我将无法滚动我的 webview，除非我禁用滚动视图上的滚动。但是，我需要滚动视图和 webview 中的滚动。关于如何做到这一点的任何建议或解决方案？

4

8 回答 8

5

在过去的 2-3 天里，我也在互联网上搜索这个问题，我有一个很棒的解决方案......

npm install --save react-native-webview-autoheight

安装后没有问题

import MyWebView from "react-native-webview-autoheight";

<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
  <View
    style={{ flex: 1, flexDirection: "column", backgroundColor: "white" }}
    pointerEvents={"none"}
  >
    <Text>Hi I am at top</Text>
    <MyWebView
      //sets the activity indicator before loading content
      startInLoadingState={true}
      source={{
        uri:
          "https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
      }}
    />
    <Text>Hi I am at bottom</Text>
  </View>
</ScrollView>

它非常适合我..

于 2018-07-25T07:29:48.997 回答
1

我修复了Webview里面的错误滚动ScrollView。onTouchEvent如果不仅Webview捕获事件onTouch调用，我会覆盖 func requestDisallowInterceptTouchEvent(true);。

你可以试试我的回购 https://github.com/thepday12/react-native-webview

于 2020-01-16T08:33:07.373 回答
0

这救了我：https ://github.com/archriss/react-native-render-html/

      [...] 
      import { ScrollView, Dimensions, Button } from 'react-native';

      import HTML from 'react-native-render-html';
      [...] 

      <ScrollView>
        <Text>{strings.title}</Text>
        <HTML
          html={htmlText}
          imagesMaxWidth={Dimensions.get('window').width}
          baseFontStyle={styles.html}
        />
        <Button
          style={styles.button}
          onButtonPressed={this.handleAcceptPress}
          text={strings.accept}
        />
      </ScrollView>
于 2020-06-18T15:15:40.113 回答
0

use TouchyWebView.java

public class TouchyWebView extends WebView {
public TouchyWebView(Context context) {
    super(context);
}

public TouchyWebView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public TouchyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    requestDisallowInterceptTouchEvent(true);
    return super.onTouchEvent(event);
}

and in layout 

<yourpachagename.TouchyWebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
于 2018-04-19T12:46:55.990 回答
0

试试这个代码

heightValue = 1000 // putting 100 will let the Webview scroll normally.


<View> <Text> Viewtiful </Text> </View>  

<WebView
    source={{uri: 'www.reddit.com'}}
    style={{height:heightValue}}
/>

在这里找到这个。

于 2018-07-06T09:54:00.383 回答
0

如果您不想使用任何 3rd 方库，这里是您的解决方案。用这个修改你的 WebView 代码。

<WebView
    originWhitelist={['*']}
    scrollEnabled={false}
    onMessage={onMessage}
    onNavigationStateChange={navigationChanged}
injectedJavaScript="window.ReactNativeWebView.postMessage(Math.max(document.body.offsetHeight, document.body.scrollHeight));"
source={{html: htmlCode}}
 />

添加此代码后，您需要为 onMessage 创建一个方法，通过该方法您将获得 WebView 内容的高度。

const[webViewHeight, setWebViewHeight] = useState(0);
const onMessage = event => {
    setWebViewHeight(Number(event.nativeEvent.data));
};

现在，你得到了 webview 的高度，你可以简单地将这个高度传递给你的 webview 样式属性。IE。，

样式={{高度：webViewHeight}}

就这样。你让 webview 完全与滚动视图一起工作。如果您有任何疑问，请随时问我。

于 2021-06-01T13:47:35.743 回答
0

这解决了我所有的问题

    npm install react-native-autoheight-webview react-native-webview

    import AutoHeightWebView from 'react-native-autoheight-webview'
    import { Dimensions } from 'react-native'

    
    <AutoHeightWebView
        style={{ width: Dimensions.get('window').width - 15, marginTop: 35 }}
        customScript={`document.body.style.background = 'lightyellow';`}
        customStyle={`
          * {
            font-family: 'Times New Roman';
          }
          p {
            font-size: 16px;
          }
        `}
        onSizeUpdated={size => console.log(size.height)}
        files={[{
            href: 'cssfileaddress',
            type: 'text/css',
            rel: 'stylesheet'
        }]}
        source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
        scalesPageToFit={true}
        viewportContent={'width=device-width, user-scalable=no'}
        /*
        other react-native-webview props
        */
      />
于 2021-03-25T19:04:25.933 回答
-1

尝试下一个代码

<ScrollView>
  <Text>Text before ScrollView</Text>
  <WebView
    source={{
      uri:
        "https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
    }}
    style={{
      marginTop: 20,
      height: 100
    }}
  />
  <Text>Text after ScrollView</Text>
  <WebView
    source={{
      uri:
        "https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
    }}
    style={{
      marginTop: 20,
      height: 100
    }}
  />
</ScrollView>

在此处输入图像描述

于 2018-02-08T14:23:47.293 回答