android
This commit is contained in:
parent
e130103ad3
commit
ad00a8fa3c
@ -532,12 +532,6 @@ dialog box. After selecting a path, the app will write the file.
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="Mobile App">
|
||||
|
||||
:::caution
|
||||
|
||||
This demo runs in iOS and requires a Macintosh computer with Xcode installed.
|
||||
|
||||
:::
|
||||
|
||||
:::note Initial Setup
|
||||
|
||||
Follow the [Environment Setup](https://reactnative.dev/docs/environment-setup)
|
||||
@ -552,14 +546,6 @@ npx react-native init SheetJSPres --version="0.70.6"
|
||||
cd SheetJSPres
|
||||
|
||||
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-native-blob-util@0.17.1
|
||||
|
||||
mkdir -p patches
|
||||
curl -L -o patches/react-native+0.70.6.patch https://github.com/facebook/react-native/files/10356761/react-native%2B0.70.6.patch
|
||||
npx patch-package
|
||||
|
||||
cd ios
|
||||
pod install
|
||||
cd ..
|
||||
```
|
||||
|
||||
Save the following to `App.js` in the project:
|
||||
@ -623,6 +609,91 @@ const App = () => ( <SafeAreaView><View style={{ marginTop: 32, padding: 24 }}>
|
||||
export default App;
|
||||
```
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="asim" label="Android">
|
||||
|
||||
:::note
|
||||
|
||||
The Android demo has been tested in Windows 10 and in macOS.
|
||||
|
||||
:::
|
||||
|
||||
Test the app in the Android simulator:
|
||||
|
||||
```bash
|
||||
npm run android
|
||||
```
|
||||
|
||||
After clicking "Press to Export", the app will show an alert with the location
|
||||
to the generated file.
|
||||
|
||||
In the Android simulator, pulling the file requires additional steps. This
|
||||
command will pull a Base64-encoded string from the simulator:
|
||||
|
||||
```bash
|
||||
adb exec-out run-as com.sheetjspres base64 files/Presidents.xlsx > pres.b64
|
||||
```
|
||||
|
||||
Decoding the file requires an OS-specific command:
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="windows" label="Windows">
|
||||
|
||||
```powershell
|
||||
certutil -decode .\pres.b64 .\Presidents.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="macos" label="macOS">
|
||||
|
||||
```bash
|
||||
base64 -D pres.b64 > Presidents.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
This command generates `Presidents.xlsx` which can be opened.
|
||||
|
||||
:::note Device Testing
|
||||
|
||||
For testing on a real device, Android 10+ requires an additional step to access
|
||||
the generated file. Add highlighted lines to `App.js`:
|
||||
|
||||
```jsx title="App.js"
|
||||
/* write buffer to file */
|
||||
const filename = RNFetchBlob.fs.dirs.DocumentDir + "/Presidents.xlsx";
|
||||
await RNFetchBlob.fs.writeFile(filename, Array.from(buf), 'ascii');
|
||||
// highlight-start
|
||||
await RNFetchBlob.MediaCollection.copyToMediaStore({
|
||||
parentFolder: "",
|
||||
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
name: "Presidents.xlsx"
|
||||
}, "Download", filename);
|
||||
// highlight-end
|
||||
|
||||
return filename;
|
||||
```
|
||||
|
||||
`Presidents.xlsx` will be copied to the `Downloads` folder.
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="ios" label="iOS">
|
||||
|
||||
:::caution
|
||||
|
||||
This demo runs in iOS and requires a Macintosh computer with Xcode installed.
|
||||
|
||||
:::
|
||||
|
||||
The native component must be linked:
|
||||
|
||||
```bash
|
||||
cd ios; pod install; cd ..
|
||||
```
|
||||
|
||||
Test the app in the iOS simulator:
|
||||
|
||||
```bash
|
||||
@ -632,5 +703,8 @@ npm run ios
|
||||
After clicking "Press to Export", the app will show an alert with the location
|
||||
to the generated file.
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
Loading…
Reference in New Issue
Block a user