React Native二维码生成组件

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native二维码生成组件:react-native-qrcode,纯JS组件,支持安卓和IOS双平台,支持中文和英文,可以自定义尺寸、前景色和背景色。

效果图

安装方法

npm install react-native-qrcode--save

示例代码

import React, { Component } from 'react';
import QRCode from 'react-native-qrcode';

import { AppRegistry, StyleSheet, View, TextInput, Dimensions } from 'react-native';

export default class Component09 extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.name}`,
  });

  state = {
    text: 'https://github.com/forrest23/ReactNativeComponents',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={text => this.setState({ text: text })}
          value={this.state.text}
        />
        <QRCode
          value={this.state.text}
          size={200}
          bgColor="purple"
          fgColor="white"
        />
      </View>
    );
  }
}

主要参数说明

value:二维码的值 size:大小,默认128 bgColor:背景色,默认#000 fgColor:前景是,默认#fff

完整示例

完整代码:GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例本次示例代码在 Component09文件夹中。请不要吝啬你们的Star

组件地址

GitHub - cssivision/react-native-qrcode: a minimalist qrcode component for react-native

原文发布于微信公众号 - ReactNative开发圈(ReactNative-Circle)

原文发表时间:2018-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

2135
来自专栏前端人人

React第三方组件3(状态管理之Flux的使用④TodoList下)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件3(状态管理之Flux的使用①简单...

3467
来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

521
来自专栏CDA数据分析师

让你效率提高300%的Excel键盘技巧

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 刚进惠普的时候,听说公司里的某个领导操作Excel从不用鼠标,感觉真是太牛逼了,满是崇拜的眼神。然而经过...

2138
来自专栏游戏杂谈

构建第一个Flex的Mobile APP

Flash Builder 4.5已经支持直接创建Flex Mobile Project,写一个最简单的例子

1052
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4466
来自专栏代码GG之家

Scoops android app多主题架构(二)

简要说明 通过注释方式,完成多主题的效果更换。可以减少一些代码,使得代码更清晰一些。 ? 使用说明 1 首先写一个注释类 ? 2 在MainApp 初始化的时候...

2068
来自专栏Golang语言社区

Go语言服务器开发之简易TCP客户端与服务端实现方法

Go语言具备强大的服务器开发支持,这里示范了最基础的服务器开发:通过TCP协议实现客户端与服务器的通讯。 一 服务端,为每个客户端新开一个goroutine 代...

37714
来自专栏JavaEdge

React.js实战之Router原理及 React-router页面路由Hash 路由H5路由

1.2K4
来自专栏Golang语言社区

Golang语言--将byte的int转换

在使用golang做数据传输的时候,会经常遇到byte与int的互转,但golang并没有现成的方法,因此只能通过binary包来解决 所以,需要 :impor...

6378

扫码关注云+社区

领取腾讯云代金券