web-dev-qa-db-fra.com

react-native - Comment faire défiler une vue Web dans scrollview pour Android?

Je souhaite utiliser WebView dans ScrollView pour mon application native React. Mais si je le fais, je ne peux pas faire défiler ma vue Web, sauf si je désactive le défilement sur la vue de défilement. Cependant, j'ai besoin du défilement à la fois dans scrollview et dans webview. Avez-vous des suggestions ou des solutions pour y parvenir?

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

Je recherche également ce problème sur Internet depuis 2-3 jours et j'ai une solution géniale pour cela ...

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

Après avoir installé cela sans aucun problème

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>

cela fonctionne parfaitement pour moi ..

3
Tijo Thomas

Je corrige le défilement des bogues Webview à l'intérieur ScrollView. Je remplace func onTouchEvent si ce n'est pas seulement Webview catch event onTouch call requestDisallowInterceptTouchEvent(true);.

Vous pouvez essayer mon repo https://github.com/thepday12/react-native-webview

1
Thép Tô Kim

Essayez ce code

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

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

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

Trouvé ceci ici.

0
DwlRathod

Essayez le code suivant

<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

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

et dans la disposition

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