react-native-safari-view, Safari视图控制器的一个响应本机包装器

分享于 

6分钟阅读

GitHub

  繁體 雙語
A React Native wrapper for Safari View Controller.
  • 源代码名称:react-native-safari-view
  • 源代码网址:http://www.github.com/naoufal/react-native-safari-view
  • react-native-safari-view源代码文档
  • react-native-safari-view源代码下载
  • Git URL:
    git://www.github.com/naoufal/react-native-safari-view.git
    Git Clone代码到本地:
    git clone http://www.github.com/naoufal/react-native-safari-view
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/naoufal/react-native-safari-view
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    本地Safari视图

    react-native versionnpm versionnpm downloadsCode Climate

    本机Safari视图是一个 Safari视图控制器( ),用于响应本地对象。

    react-native-safari-view

    文档

    安装

    npm i --save react-native-safari-view

    支持

    由于本机生态系统的快速变化,我们没有正式支持这个 MODULE,只是最新版本的React。 当前支持的版本在本自述文件顶部的React Native上显示。 如果是过期的,我们鼓励你提交请求请求 !

    用法

    链接库

    为了使用Safari视图,你必须首先将你的项目链接到库。 关于如何在的本地文档环境中实现这一点,有很好的文档。

    显示Safari视图

    一旦你链接了库,你将要求它通过你的应用程序使它可以用:

    var SafariView =require('react-native-safari-view');

    显示Safari视图与调用一样简单:

    SafariView.show({
     url:'https://github.com/naoufal'});

    URL更改通知

    没有用于检索SFSafariViewController或者它的委托在iOS中提供的URL更改的API,因这里无法知道用户在哪里导航。 但是,当Safari视图导航到你的应用程序指定的URL方案时,就有可能得到通知( 比如。 your-app-name:// )。这对于实现面向对象的流,如 in/openid连接非常有用。

    要为你的URL方案获取URL通知,你需要:

    • register 项目中的 URL方案插件
    • 确保你已经在你的本地项目中设置了链接
    • 在你的本机代码中侦听URL更改( 例如。 Linking.addEventListener('url', eventHandler) ) ;

    示例

    在应用程序中使用Safari视图通常如下所示:

    importReact, { Component } from"react";importSafariViewfrom"react-native-safari-view";classYourComponentextendsComponent {
     constructor(props) {
     super(props);
     }
     _pressHandler() {
     SafariView.isAvailable()
    . then(SafariView.show({
     url:"https://github.com/naoufal" }))
    . catch(error=> {
     // Fallback WebView code for iOS 8 and earlier });
     }
     render() {
     return (
     <View>...<Button onPress={this._pressHandler}> Show Safari View
     </Button></View> );
     }
    }

    方法

    显示( safariOptions )

    显示带有提供的url的Safari视图。

    参数

    • safariOptions - 包含 url 键和可选的readerMode 键。tintColor 和/或者 barTintColorObject

    safariOptions

    • url - 包含要在Safari视图中加载的url的String
    • readerMode - 指示在可用情况下使用safari模式的Boolean
    • tintColor - 包含一个十六进制,rgba或者rgba颜色的String,用于浏览器控件
    • barTintColor - 一个包含六十六进制或者多边形颜色的String,用于浏览器控件的背景( 仅适用于 iOS 10和更高)
    • fromBottom - 指示从底部打开Safari视图的'布尔型'

    范例

    SafariView.show({
     url:"http://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html",
     readerMode:true// optional, tintColor:"#000"// optional barTintColor:"#fff"// optional});

    )

    检查Safari视图是否在设备上可用。

    示例

    SafariView.isAvailable()
    . then(available=> {
     console.log("SafariView is available.");
     })
    . catch(error=> {
     console.log(error);
     });

    ( )

    取消当前活动的Safari视图。

    示例

    SafariView.dismiss()

    事件

    Safari视图激发了以下事件。

    onShow

    示例

    let showSubscription =SafariView.addEventListener(
     "onShow",
     () => {
     StatusBar.setBarStyle("light-content");
     }
    );

    onDismiss

    示例

    let dismissSubscription =SafariView.addEventListener(
     "onDismiss",
     () => {
     StatusBar.setBarStyle("default");
     }
    );

    许可证

    版权所有( c ) 2015,Naoufal Kadhom

    授权使用。复制。修改和/或者分发本软件的任何目的,如上述版权通知和本权限通知。

    软件是"是"提供的,作者认为这个软件包括所有隐含的保证和适应性的保证。 任何特殊。直接。间接或者间接损坏或者损坏,无论在合同。收益或者它的他行为。


    控制  VIEW  WRAP  换行  react  NAT  
    相关文章