首页 > 其他分享 >react-native 调用手机自带分享

react-native 调用手机自带分享

时间:2023-07-19 10:33:19浏览次数:34  
标签:const getTime Share react shotRef 自带 native

实现效果 

import Share from 'react-native-share'
import ViewShot from 'react-native-view-shot'

const shotRef = useRef<ViewShot>(null)

const getTime = () => {
    return new Date().getTime().toString()
}

const OnShare = () => {
    shotRef.current!.capture().then(uri => {
      Share.open({
        url: uri
      })
    })
  }

<Button onPress={OnShare}>Share</Button>

<ViewShot
        style={styles.shotWrap}
        ref={shotRef}
        options={{
          fileName: getTime(),
          format: 'png',
          quality: 0.9
        }}>
         //内容可自定义
          <Image style={[styles.imgsShera]} resizeMode="cover" source={require('./assets/shera.png')}></Image>
      </ViewShot>    

 

标签:const,getTime,Share,react,shotRef,自带,native
From: https://www.cnblogs.com/tlfe/p/17564895.html

相关文章

  • Reactjs学习-组件之间传值
    本篇是关于React的基础-父子组件之间传值子组件想使用父组件的某个属性父组件就需要把这个属性传递给子组件,子组件就可以用this.props.属性名来接收子组件调用父组件的方法父组件就需要把这个方法以属性的方式传递给子组件,子组件就可以用this.属性名来调用,要注意this指向......
  • Reactjs学习-JSX语法
    本篇是关于React的基础-JSX语法什么是JSX在js文件中写html,这样的语法就是JSX 如何书写跟html写法一致,注意,首字母大写的标签是组件,首字母小写的,例如div是html元素 有哪些注意事项1.在类组件中写注释,用花括号包起来2.style中的某个属性需要用state中的值, 用模......
  • Reactjs学习-State
    本篇是关于React的基础-State在哪儿定义react在Constructor函数中定义state,如下 如何绑定使用JSX语法中,想使用刚才定义的state,需要用花括号包起来例如 如何修改state需要绑定事件,React提供setState函数来做这个操作this.setState({state名:值})注意:......
  • 浅析vue3中如何使用动态组件、如何快速理解Vue3的 toRaw和markRaw、ref与shallowRef、
    一、Vue3中使用component:is加载动态组件1、不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串2、使用setup语法糖,这时候的is如果使用字符串就会加载不出来,得使用组件实例<componentclass="task-box":is="componentObj[route.params.type]":info="taskInfo"></co......
  • React、Vue框架如何实现组件更新,原理是什么?
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址引言React和Vue都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染整个......
  • 在MacOS中使用free up Purgeable space释放磁盘空间,CleanMacX里面自带这个功能
    当你的Mac硬盘空间不足时,macOS会自动将一些文件标记为"可清除"(Purgeable),这些文件包括已下载但未安装的软件、iCloudDrive中的文件、以及其他一些可以重新下载或重新生成的文件。你可以通过释放这些"可清除"空间来腾出磁盘空间。要释放Purgeable空间,可以按照以下步骤操作:打......
  • 基于Avalonia 11.0.0+ReactiveUI 的跨平台项目开发1-通用框架
    基于Avalonia11.0.0+ReactiveUI的跨平台项目开发1-通用框架Avalonia简介:Avalonia是.NET的一个跨平台UI框架,提供了一个灵活的样式系统,支持广泛的操作系统,如Windows、Linux、macOS,并对Android、iOS和WebAssembly提供了实验性支持。为什么使用Avalonia:之前已经了解了基于Avalon......
  • react项目中使用redux的实例
    当在React项目中使用Redux,你需要安装redux和react-redux库。下面是一个简单的示例,展示了如何在React项目中集成Redux:1.安装依赖库:npminstallreduxreact-redux2.创建Reduxstore:在项目的根目录下,创建一个名为store.js的文件,并编写以下代码:点击查看代码import{createSto......
  • React(二):JSX
    一、什么是JSXJSX是一种将HTML和JavaScript结合的语法扩展,它允许在JavaScript代码中直接编写HTML标记。上一节在学习元素渲染的时候就已经使用过JSX语法来进行元素的定义:constelement=<h1>HelloReact</h1>;如上述语句所示,既不是字符串,又不是Html,而且直接在javascript中......
  • Reactjs学习笔记
    本篇是关于React的简介ReactJS是Facebook推出的一款前端框架,2013年开源,提供了一种函数式编程思想,拥有比较健全的文档和完善的社区,在React16的版本中对算法进行了革新,称之为ReactFiber。开发环境搭建需要nodeJS解析器,以及npm(node的包管理工具)如何引用React1.使用.js来引入......