QRCodeScanner标签的样式问题

时间:2020-04-13 19:00:08

标签: javascript ios react-native

我正在使用React Native,并且使用导入的标签QRCodeScanner出现样式问题。我不知道如何设置背景和扫描仪本身的样式。在哪里可以更改backgroundColor,如何缩小扫描仪的尺寸以及如何更改扫描仪的位置?

这是我的代码:

'use strict';

import React, { Component } from 'react';

import {
  View,
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Linking
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera as Camera } from 'react-native-camera';
class ScanScreen extends Component {
  onSuccess = e => {
    Linking.openURL(e.data).catch(err =>
      console.error('An error occured', err)
    );
  };

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.background}>
      <QRCodeScanner
        onRead={this.onSuccess}
        flashMode={Camera.Constants.FlashMode.torch}
        topContent={
          <Text></Text>
        }
        bottomContent={
          <Text></Text>
        }
      />
      </View>      
    );
  }
}

const styles = StyleSheet.create({
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#000000'
  },
  textBold: {
    fontWeight: '500',
    color: '#000'
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)'
  },
  buttonTouchable: {
    padding: 16
  },
  background: {
    backgroundColor: "#5c9dff",
    // marginBottom: 100
  }
});
export default ScanScreen;

这是React Native的模拟器:

enter image description here

谢谢。

0 个答案:

没有答案