web-dev-qa-db-ja.com

react-native-Androidのscrollview内でWebviewをスクロールするにはどうすればよいですか？

反応ネイティブアプリのScrollView内でWebViewを使用したいと思います。しかし、そうすると、scrollviewでのスクロールを無効にしない限り、webviewをスクロールできません。ただし、スクロールビューとWebビューの両方でスクロールが必要です。これを達成する方法に関する提案や解決策はありますか？

react-nativewebviewreact-native-androidreact-native-scrollview
16
Garvita C

私はまた、この問題を過去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>

それは私にとって完璧に機能します。

3
Tijo Thomas

Webview内のバグスクロールScrollViewを修正します。 func onTouchEventをオーバーライドするだけでなく、Webview catch event onTouch call requestDisallowInterceptTouchEvent(true);をオーバーライドします。

私のリポジトリを試すことができます https://github.com/thepday12/react-native-webview

1
Thép Tô Kim

このコードを試してください

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

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

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

これが見つかりました こちら

0
DwlRathod

次のコードを試す

<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>

enter image description here

0
Oleksandr Cherniavenko

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);
}

とレイアウトで

<yourpachagename.TouchyWebView
                Android:id="@+id/webView"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent" />
0
hardik sojitra