WebView组件详解以及实例使用(22) - [ React Native学习指南 ] - 看云
转载请标明出处：
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:
今天我们一起来看一下WebView组件讲解以及使用实例
刚创建的React Native技术交流1群(),React Native交流2群:()，请不要重复加群！,欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
该WebView组件进行创建渲染一个原生的WebView，进行加载一个网页。
(二)属性方法
继承可以使用View组件的所有属性和Style(具体查看: 和)
automaticallyAdjustContentInsets bool
设置是否自动调整内容
contentInset
{top:number,left:number,bottom:number,right:number}
设置内容所占的尺寸大小
WebView加载的HTML文本字符串
injectJavaScript
string 当网页加载之前进行注入一段js代码
onError function
方法 当网页加载失败的时候调用
function 方法
当网页加载结束的时候调用
onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败
onLoadStart
当网页开始加载的时候调用
onNavigationStateChange function方法
当导航状态发生变化的时候调用
renderError
该方法用于渲染一个View视图用来显示错误信息
renderLoagin function
该方法用于渲染一个View视图用来显示一个加载进度指示器
startInLoadingState
设置加载的网页地址
allowsInlineMediaPlayback
该适合iOS平台，设置决定当使用HTML5播放视频的时候在当前页面位置还是使用原生的全屏播放器播放，默认值false。【注意】.为了让视频在原网页位置进行播放，不光要设置该属性为true，还必须要设置HTML页面中video节点的包含webkit-playsinline属性
bounces bool
该适合iOS平台 设置是否有界面反弹特性
domStorageEnabled bool
该适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）
javaScriptEnabled
该适合于Android平台，是否开启javascript，在iOS中的WebView是默认开启的
onShouldStartLoadWithRequest
该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求
scalesPageToFit
该适合iOS平台
用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面
scrollEnabled
该适合iOS平台 用于设置是否开启页面滚动
(三)实战实例
上面我已经对于WebView组件的基本介绍以及相关属性方法做了讲解，下面我们用几个实例来演示一下WebView组件的使用。
3.1.先演示一个WebView组件最基本的使用方法，直接加载一个网页，具体代码如下:
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var DEFAULT_URL = 'http://www.lcode.org';
var WebViewDemo =React.createClass({
render: function() {
&View style={{flex:1}}&
&Textstyle={{height:40}}&简单的网页显示&/Text&
&WebViewstyle={styles.webview_style}
url={DEFAULT_URL}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
&/WebView&
var styles =StyleSheet.create({
webview_style:{
backgroundColor:'#00ff00',
AppRegistry.registerComponent('WebViewDemo',() =& WebViewDemo);
运行效果截图如下:
3.2.WebView加载本地的HTML静态字符串，具体代码如下:
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var DEFAULT_URL = 'http://www.lcode.org';
const HTML = `
&!DOCTYPEhtml&\n
&title&HTML字符串&/title&
&metahttp-equiv="content-type" content="text/charset=utf-8"&
&meta name="viewport"content="width=320, user-scalable=no"&
&style type="text/css"&
margin: 0;
padding: 0;
font: 62.5% arial, sans-
background: #
padding: 45
margin: 0;
text-align:
color: #33f;
&h1&加载静态的HTML文本信息&/h1&
var WebViewDemo =React.createClass({
render: function() {
&View style={{flex:1}}&
&WebViewstyle={styles.webview_style}
html={HTML}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}
&/WebView&
var styles =StyleSheet.create({
webview_style:{
backgroundColor:'#00ff00',
AppRegistry.registerComponent('WebViewDemo',() =& WebViewDemo);
运行效果截图如下:
(四)最后总结
今天我们主要学习一下WebView组件的基本介绍和实例演示使用，具体还有更加详细的使用方法会在后面进阶中继续更新的。大家有问题可以加一下群React Native技术交流群()或者底下进行回复一下。
尊重原创，转载请注明：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
页面正在加载中react native 之 react-native-image-picke的详细使用图解 - pheromone程序猿 - 博客园
最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:.
该插件可以同时给iOS和Android两个平台下使用,但是需要配置下各自平台下的文件,上有详细的文字说明,但是本人对于文字向来无感,所以特地图解记录下配置说明和用法.
&1. & 首先,安装下该插件:
npm install react-native-image-picker@latest --save
&2. & 对于github上介绍的link命令,我并没有使用,所以跳过
下面对于各自平台进行配置即可.
In the XCode's "Project navigator", right click on your project's Libraries folder ?&Add Files to &...&
Go to&node_modules&?&react-native-image-picker&?&ios&? select&RNImagePicker.xcodeproj
　=& &打开Xcode打开项目,点击根目录,右键选择　Add Files to 'XXX',选中项目中的该路径下的文件即可:node_modules&?&react-native-image-picker&?&ios&? select&RNImagePicker.xcodeproj
& & 3.Add&RNImagePicker.a&to&Build Phases -& Link Binary With Libraries
& & &4.For iOS 10+, Add the&NSPhotoLibraryUsageDescription&and&NSCameraUsageDescription&keys to your&Info.plist&with strings describing why your app needs these permissions
=&对于适配iOS10,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription
iOS平台配置完毕.
& & 1.Add the following lines to&android/settings.gradle:
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
& & 2.Add the compile line to the dependencies in&android/app/build.gradle:
dependencies {
compile project(':react-native-image-picker')
& & &3.Add the required permissions in&AndroidManifest.xml:
&uses-permission android:name="android.permission.CAMERA" /&
&uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/&
& & &4.Add the import and link the package in&MainApplication.java: &&
import com.imagepicker.ImagePickerP
new ImagePickerPackage()
OK,安卓这边也配置完毕.
& &配置弹出框信息
ImagePicker from 'react-native-image-picker'; //第三方相机
var photoOptions = {
//底部弹出框选项
title:'请选择',
cancelButtonTitle:'取消',
takePhotoButtonTitle:'拍照',
chooseFromLibraryButtonTitle:'选择相册',
quality:0.75,
allowsEditing:true,
noData:false,
storageOptions: {
skipBackup: true,
path:'images'
cameraAction = () =&{
ImagePicker.showImagePicker(photoOptions,(response) =&{
console.log('response'+response);
if (response.didCancel){
&demo地址:
阅读(...) 评论()
Powered By:The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.}