IT이야기

react-native - Android의 스크롤 보기 내에서 웹 보기를 스크롤하는 방법

cyworld 2022. 3. 22. 21:20
반응형

react-native - Android의 스크롤 보기 내에서 웹 보기를 스크롤하는 방법

내 리액션 네이티브 앱에 ScrollView 내의 WebView를 사용하고 싶다.그러나 그렇게 하면 스크롤 보기의 스크롤을 비활성화하지 않는 한 웹 보기를 스크롤할 수 없다.하지만, 나는 웹뷰뿐만 아니라 스크롤뷰 둘 다에 있는 스크롤이 필요해.이 작업을 수행하는 방법에 대한 제안이나 해결책이 있으십니까?

나도 지난 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>

그것은 나에게 완벽하게 효과가 있다.

나는 버그 스크롤을 수정한다.Webview안쪽에ScrollView나는 펑크를 무시한다.onTouchEvent뿐만 아니라Webview사건을 포착하다onTouch부르다requestDisallowInterceptTouchEvent(true);.

내 repo https://github.com/thepday12/react-native-webview을 사용해봐.

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

이 코드 사용

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


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

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

여기서 이걸 찾았어.

이것이 나를 구했다: 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>

이것으로 나의 모든 문제가 해결되었다.

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

타사 라이브러리를 사용하지 않으려면 이 방법으로 WebView 코드를 수정하십시오.

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

이 코드를 추가한 후 WebView 콘텐츠의 높이를 얻을 수 있는 onMessage 메소드를 만들어야 한다.

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

이제, 웹뷰의 높이를 얻었고, 그 높이를 웹뷰 스타일 소품까지 간단히 전달할 수 있다.즉

style={{높이: webView높이}}

그게 다야.웹 뷰가 스크롤 뷰와 완벽하게 작동하고 있어궁금한 게 있으면 언제든지 물어봐.

다음 코드 시도

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

여기에 이미지 설명을 입력하십시오.

참조URL: https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android

반응형

'IT이야기' 카테고리의 다른 글

페이지 새로 고침 시 Vuex 상태  (0) 2022.03.22
텐서플로우가 python shell 안쪽에서 gpu 가속을 사용하는지 확인하는 방법  (0) 2022.03.22
vue-properties는 구성 요소를 렌더링하는 것이 아니라 이 구성 요소의 URL을 변경하는 것이다.1달러짜리밀다  (0) 2022.03.22
사전을 복사하고 사본만 편집하는 방법  (0) 2022.03.22
다시 로드한 후 vue-temp가 잘못된 매개 변수를 설정함  (0) 2022.03.21

'IT이야기'의 다른글

  • 현재글react-native - Android의 스크롤 보기 내에서 웹 보기를 스크롤하는 방법

관련글

댓글

티스토리툴바