モバイルPOS印刷エキスポアプリから


エキスポは、任意のデバイスのBluetoothを管理するためのAPIを持っていません.いくつかの反応ネイティブパッケージは、Bluetooththis one . しかし、このパッケージは、現在EXPOで使用するのが簡単でありません.多くの人々が求めているthis ブルートゥース機能長い時間.にもかかわらず、ALexpo SDK 42 使用可能react-native-ble-plx パッケージをカスタムするdevelopment clients , 後述here .
我々はこのパッケージを使用して管理しても、それはまだモバイルPOSM2 イミンのJavascriptは、どんなJavaScriptプロジェクトでも簡単に使用するためにSDKを提供しませんでした.ここではない任意の方法は、このプリンタに万博アプリから印刷可能ですか?
うまくいけば、はいあります.
がApp Storeで開発されて開発されているrawbt . 我々は2から2つの余分なアプリを使用する必要がありますrawbt . つは、Bluetooth経由でプリンタを接続し、別の自動印刷ジョブを行います.自動印刷によって私たちは私たちのExpoアプリを介して特定のフォルダに任意のファイルをダウンロードするたびに意味します.印刷は自動的に成功した後に開始されます.
したがって、基本的なプロセスはこのようなものです.

Expo app downlaods a file to a folder => Whenever any new files comes to this specific folder => AutoPrint for RawBT will send request to => RawBT print service => Which will print the file


目次

  • Download and configure RawBT
  • Download and configure AutoPrint for RawBT
  • Create expo app
  • をダウンロードして設定する


    我々はダウンロードしてインストールする必要があります

    RawBT print service
    プレイストアからインストールされていない場合.アプリをインストールした後、設定に移動します.コンストラクタメソッドBluetoothを設定します.Bluetoothデバイスを検索して接続パラメータを設定します.プリンタドライバESC/POSを設定します.テストをクリックして、印刷が動作しているかどうかを確認します.

    RAWBTのダウンロードと構成の自動印刷

    This app is a kind of helper app of RawBT print service. What actually it does is, if we enable and select a folder in device folder this will keep watching on that folder for any file changes. If any new file appears on that particular folder then it will immediately send print request to RawBT print service 紙を印刷する.
    だからダウンロードした後AutoPrint for RawBt PlayStoreから、我々は要求したすべての許可を受け入れる必要があります.次に、我々は印刷用の新しいファイルを見続けるフォルダパスを追加します.この場合は、このパスを追加します/storage/emulated/0/Pictures/auto print . EXPOメディアライブラリは、おそらくデバイスのストレージの写真フォルダーでファイルを保存しますので、ここで我々はこれを選択しています(私は、フォルダを変更する他の方法がある場合は確信しています).私たちは、オートプリントと呼ばれるその写真フォルダの別のフォルダを作成します.以下に示すサンプル設定です.

    You can change the auto print folder name to some other unique name if you want.


    エキスポアプリ

    Now we do not have to touch the two previous apps anymore if everything working fine. Now just we have to download the pdf file in the specific directory. RawBT will automatically print each new pdf. So now I am going create a new expo project by expo init command. This is the App.js file code:

    import * as React from 'react';
    import { View, StyleSheet, Button } from 'react-native';
    import Constants from 'expo-constants';
    import * as FileSystem from 'expo-file-system';
    import * as MediaLibrary from 'expo-media-library';
    
    export default function App() {
    
        // Download the pdf file to expo temporary storage
        async function download2() {
        const fileUrl = 'https://YOUR_PDF_LINK.com';
        const fileName = `${Date.now()}.pdf`;
    
        FileSystem.downloadAsync(fileUrl, FileSystem.documentDirectory + fileName)
          .then(({ uri }) => {
            console.log('Finished downloading to ', uri);
            saveFile(uri);
          })
          .catch((error) => {
            console.error(error);
          });
      }
    
      async function saveFile(filePath) {
        const albumName = 'auto print';
        const permission = await MediaLibrary.requestPermissionsAsync();
    
        let asset = null;
        if (permission.granted) {
          try {
            asset = await MediaLibrary.createAssetAsync(filePath);
          } catch (e) {
            console.error('MediaLibrary.createAssetAsync failed', e);
          }
    
          if (asset) {
            try {
              let album = await MediaLibrary.getAlbumAsync(albumName);
              if (album) {
                await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
              } else {
                album = await MediaLibrary.createAlbumAsync(
                  albumName,
                  asset,
                  false
                );
              }
              const assetResult = await MediaLibrary.getAssetsAsync({
                first: 1,
                album,
                sortBy: MediaLibrary.SortBy.creationTime,
              });
              asset = await assetResult.assets[0];
            } catch (e) {
              console.error(' failed', e);
            }
          } else {
            console.error('unable to use MediaLibrary, can not create assets');
          }
        }
      }
    
      return (
        <View style={styles.container}>
          <Button title="Download invoice & print" onPress={download2}></Button>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
      },
    });
    
    

    By using this piece of code now we can easily download the file from the web and save it to specific directory.

    In the download2() function we are using FileSystem.downloadAsync() to download the pdf file from the web. This will download the file to the host.exp.exponent directory, which cannot be accessable with other apps easily. So that after downloading the file we have to move to the downloaded file to a specific directory.

    For that we are using the saveFile() . Here we are mainly using the MediaLibrary.createAssetAsync() to store the file in a specific directory. In our case we are saving it to the /storage/emulated/0/Pictures/auto print path. This is the folder where the AutoPrint for RawBT RWBTによって自動的に印刷するどんな新しいファイルも探し続けます.
    これがpackage.json 私のファイルは、エラーを避けるためにこのパッケージを正しくインストールします.
    {
      "main": "node_modules/expo/AppEntry.js",
      "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
      },
      "dependencies": {
        "expo": "~42.0.1",
        "expo-constants": "~11.0.1",
        "expo-file-system": "~11.1.3",
        "expo-media-library": "~12.1.2",
        "expo-print": "~10.2.1",
        "expo-sharing": "~9.2.1",
        "expo-status-bar": "~1.0.4",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
        "react-native-web": "~0.13.12"
      },
      "devDependencies": {
        "@babel/core": "^7.9.0"
      },
      "private": true
    }
    
    
    我々が押すならばDownload invoice & print ボタン.初めて、複数のパーミッションを要求します.リンクが正しい場合はダウンロードがすぐに完了します.そして、印刷はうまくいきます.