暫無描述

iou90 6f7904cf8e bump version to 1.3.2		5 年之前
autoHeightWebView	calculate scale inside updateSize function to fix https://github.com/iou90/react-native-autoheight-webview/pull/141	5 年之前
demo	upgrade react-native-webview to 7.5.1 for demo	5 年之前
.eslintrc.js	add @react-native-community /eslint-config; use @react-native-community /eslint-config	5 年之前
.gitignore	Added yarn-error.log to .gitignore	7 年之前
.prettierrc	add .prettierrc	5 年之前
LICENSE	Added license file	7 年之前
README.md	update Readme	5 年之前
README_old.md	fix issue of index.js	5 年之前
index.d.ts	added zoomable prop for ios	5 年之前
index.js	fix issue of index.js	5 年之前
package-lock.json	fix vulnerabilities	5 年之前
package.json	bump version to 1.3.2	5 年之前
yarn.lock	add @react-native-community /eslint-config; use @react-native-community /eslint-config	5 年之前

react-native-autoheight-webview

An auto height webview for React Native, even auto width for inline html.

versioning

npm install react-native-autoheight-webview --save (rn >= 0.59, be capable of Hooks)

npm install react-native-autoheight-webview@1.0.1 --save (0.57 <= rn < 0.59)

Read README_old for earlier version guide.

usage

import AutoHeightWebView from 'react-native-autoheight-webview'

import { Dimensions } from 'react-native'

<AutoHeightWebView
    // default by screen width,
    // if there are some text selection issues on iOS, the width should be reduced more than 15 and the marginTop should be added more than 35
    style={{ width: Dimensions.get('window').width - 15, marginTop: 35 }}
    customScript={`document.body.style.background = 'lightyellow';`}
    // add custom CSS to the page's <head>
    customStyle={`
      * {
        font-family: 'Times New Roman';
      }
      p {
        font-size: 16px;
      }
    `}
    // either height or width updated will trigger onSizeUpdated
    onSizeUpdated={({size => console.log(size.height)})},
    /*
    using local or remote files
    to add local files:
    add baseUrl/files... to android/app/src/assets/ on android
    add baseUrl/files... to project root on iOS
    */
    files={[{
        href: 'cssfileaddress',
        type: 'text/css',
        rel: 'stylesheet'
    }]}
    // baseUrl now contained by source
    // 'web/' by default on iOS
    // 'file:///android_asset/web/' by default on Android
    // or uri
    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>` }}
    // false by default on Android (different from react-native-webview),
    // when scalesPageToFit was assigned to true, it will apply page scale to size directly instead of using viewport meta script 
    scalesPageToFit={true}
    // only works on iOS when scalesPageToFit was false,
    // in other conditions, you can use your own custom scripts to create viewport meta to disable zooming
    zoomable={false}
    /*
    other react-native-webview props
    */
  />

showcase

demo

You may have to use yarn to install the dependencies of the demo and remove “demo/node_modules/react-native-autoheight-webview/demo” manually, cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105) and “yarn install” ignores “files” from local dependencies (https://github.com/yarnpkg/yarn/issues/2822). For android, you may have to copy the “Users\UserName.android\debug.keystore” to “demo/android/app/”.

README.md

react-native-autoheight-webview

versioning

usage

showcase

demo