美文网首页React Native编程
react-native的webview组件的使用心得记录

react-native的webview组件的使用心得记录

作者: 既然可以颠覆何必循规蹈矩 | 来源:发表于2017-06-29 15:18 被阅读89次

    属性介绍:

    1.source: 加载的网址。(必须带http:// 或者https://)

    2.automaticallyAdjustContentInsets: 自动调节内容内偏移,控制是否自动调节内容内偏移以便于一个navigation bar或者tab bar或者toolbar不挡住Scrollview中的内容。默认是true。

    3.javaScriptEnabled bool : 允许执行js语言,仅限Android平台。iOS平台JavaScript是默认开启的。

    4.domStorageEnabled bool : 仅限Android平台。指定是否开启DOM本地存储。

    5.decelerationRate: 指定一个浮点数,用于设置在用户停止触摸之后,此视图应以多快的速度停止滚动。也可以指定预设的字符串值,如"normal"和"fast",分别对应UIScrollViewDecelerationRateNormal 和UIScrollViewDecelerationRateFast。 Normal(正常速度): 0.998 Fast(较快速度): 0.9 (iOS WebView的默认值)。

    6.onNavigationStateChange : 这个方法无法阻止页面的跳转行为,所以大家只能通过这个方法获取用户的一些行为。从而做出判断,当webview显示的页面中有 postMessage的同名函数时将会报错。

    onNavigationStateChange = (navState) => {
       this.setState({
         backButtonEnabled: navState.canGoBack,
         forwardButtonEnabled: navState.canGoForward,
         url: navState.url,
         status: navState.title,
         loading: navState.loading,
         scalesPageToFit: true
       });
     };
    
    <WebView
                    bounces={false}
                    scalesPageToFit={true}
                    source={{uri:"http://www.baidu.com"}}
                    style={styles.webView}>
    </WebView>
    

    7.onShouldStartLoadWithRequest: 允许为webview发起的请求运行一个自定义的处理函数。返回true或false表示是否要继续执行响应的请求。

    8.scalesPageToFit bool :设置是否要把网页缩放到适应视图的大小。

    9.mediaPlaybackRequiresUserAction bool : 设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为true.

    10.onError function :加载失败时调用。

    11.onLoad function :加载成功时调用。

    12.onLoadEnd function :加载结束时(无论成功或失败)调用。

    12.onLoadStart function :加载开始时调用。

    13.onMessage function :在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数,从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview 中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。网页端的window.postMessage只发送一个参数data,此参数封装在RN端的event对象中,即event.nativeEvent.data。data只能是一个字符串

    14.renderError function :设置一个函数,返回一个视图用于显示错误。

    15.renderLoading function : 设置一个函数,返回一个加载指示器。

    16.startInLoadingState bool :强制WebView在第一次加载时先显示loading视图。默认为true。

    相关文章

      网友评论

        本文标题:react-native的webview组件的使用心得记录

        本文链接:https://www.haomeiwen.com/subject/jvbmcxtx.html