react-native组件(6)--(react-native-qrcode)

字符串生成二维码组件
安装

npm install react-native-qrcode --save

使用
'use strict';
import React, { Component } from 'react'
import QRCode from 'react-native-qrcode';

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

class HelloWorld extends Component {
  state = {
    text: 'http://facebook.github.io/react-native/',
  };

  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>
    );
  };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'
    },

    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        margin: 10,
        borderRadius: 5,
        padding: 5,
    }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

module.exports = HelloWorld;
参数
prop type default value
value string 我是要变二维码的字符串
size number 128
bgColor string (CSS color) "#000"
fgColor string (CSS color) "#FFF"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简短说明 收录一些好用的RN第三方组件,以方便日常的使用,大家有什么推荐的也可以跟我说,我加进去。如有冒犯,可以联...
    以德扶人阅读 43,798评论 44 214
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,627评论 25 709
  • 恢复作息时间,正常化! 坚持自考学习,拿文凭! 关注时事政治,讲政治! 少说,多干,务实;慎言,慎行;戒骄,戒躁。
    YM一铭阅读 903评论 0 0
  • 徐不二阅读 2,713评论 0 2
  • 大石桥可能也算是郑州的一个地标性地名。也是郑州变化最大的一个地方之一。以前的大石桥就是一座普通的石头桥,位于...
    老马识新途阅读 6,454评论 0 1