如何让Next.JS二维码扫描器像许多移动应用程序一样适合整个屏幕？

Question

我真正想要的只是一个适合整个屏幕的二维码阅读器页面，没有留下任何空白，并且覆盖扫描空间。因此，如果有人根据他们的经验或建议有任何替代方案，我将非常感激。

我尝试了各种库，包括这个react-qr-reader 这有点方便，因为您可以自定义取景器（覆盖或用户界面）以适应给定的设计，但问题是我无法适应手机的整个屏幕。我尝试将其放入 div 中并增加宽度，但空白空间又会根据手机型号而变化，而且图片质量也会下降，还有 videoContainerStyle、videoStyle、containerStyle 等属性。

`import { useState } from 'react';
import { QrReader } from 'react-qr-reader';



const Test = () => {
  const [data, setData] = useState<string>('No result');

  return (
    <>
      <div style={{ }}>
        <QrReader
          onResult={(result: any, error: any) => {
            if (result) {
              setData(result?.text);
            }

            if (error) {
              console.info(error);
            }
          }}
          constraints={{ 'facingMode': 'environment' }}


        />
      </div>
      <p>{data}</p>
    </>
  );
};

export default Test;`

Answer 1

你解决这个问题了吗？因为我目前正在处理类似的问题？