의 목적

Svelte Native를 이용해서 사진으로 그 물건을 표시해 보세요.

컨디션

이번에는 안드로이드를 썼어요.
android11
node: v16.3.0
npm: v7.15.1

프로젝트 준비

공식 홈페이지에도 있듯이 템플릿을 통해 svelte native를 만드는 프로젝트입니다.

npm install -g nativescript
npx degit halfnelson/svelte-native-template my-camera-app
cd my-mobile-app

이후 다음 명령을 실행한 후 정상적인 동작을 할 때 QR 코드 등을 표시해야 한다.

npm install
ns preview

이런

응용 프로그램 미리 보기

다음 두 애플리케이션을 다운로드하십시오.
Native Script Playground 읽기 콘솔에 표시된 QR 코드를 읽을 때 적용한 미리 보기가 NativeScript Preview에 표시됩니다.
이런 성적을 내고 성공했다

나는 카메라로 사진을 찍을 줄 안다.

카메라 플러그인을 추가하려면 다음 명령을 실행하십시오.

tns plugin add nativescript-camera

그리고 프로젝트의 app/App.svelte를 다음 코드로 고칩니다.

<script lang="typescript">
  import * as camera from "nativescript-camera";
  let image;
  const onButtonTap = () => {
    camera
      .takePicture()
      .then(function (imageAsset) {
        console.log(imageAsset);
        image = imageAsset._android;
      })
      .catch(function (err) {
        console.log("Error -> " + err.message);
      });
  };
</script>

<page>
  <stackLayout >
    <button text="Button" on:tap={onButtonTap} />
    <image src={image} />
  </stackLayout>
</page>

결실

잘 안 보이지만 위에 버튼이 있어서 그걸 누르자 카메라가 작동했어요.
사진을 찍으면 앱에 앱을 표시할 수 있다.

● 사진부터 OK버튼까지 담요가 있으니 주의한다

결론

대단하다.