Expoで開発してアプリを公開して得られた知見 / RNM6

React Native Meetup #6での発表資料です

Transcript

1. Expoで開発してアプリを 公開して得られた知見 React Native Meetup#6 July 12, 2017
2. • ぽち@pchw • https://github.com/pchw • https://twitch.tv/pchw • SW2036-0981-2522 イントロ
3. イントロ • quickAnnict • Vainglory大会カレンダー
4. [ピーアール] エンジニア ボシュウ • Tokyo Otaku Mode inc. • オタク関連の全世界向けeコマース・クラウドファンディング・ ニュース・コンテンツ投稿とかのプラットフォーム • ショッピングカートから裏側の倉庫のシステムまで自前 • Shibuya(JP)/Portland(US)/Maihama(JP) • Node.js - MongoDB - Vue.js - etc.. • http://bit.ly/tom-engineer
6. Expo - expo.io
7. シツモン
13. CRNA と Expo
14. { "expo": { "sdkVersion": "18.0.0" } } { "expo": { "name": "18", "description": "An empty new project", "slug": "18", "privacy": "public", "sdkVersion": "18.0.0", "version": "1.0.0", "orientation": "portrait", "primaryColor": "#cccccc", "icon": "./assets/icons/app.png", "loading": { "icon": "./assets/icons/loading.png", "hideExponentText": false }, "packagerOpts": { "assetExts": ["ttf", "mp4"] }, "ios": { "supportsTablet": true } } } CRNA Expo
18. Expo を使うと楽！
19. Accelerometer Gyroscope Fingerprint - TouchID Location Notifications Permissions Pedometer - Core Motion ScreenOrientation Facebook/Google Asset AV/Audio/Video Svg Font GLView BlurView Contacts DocumentPicker ImagePicker BarCodeScanner MapView Util KeepAwake Constants LinearGradient takeSnapshotAsync SQLite Lottie -Animation Amplitude/Segment - analytics Branch - linking FacebookAds Expo SDK
20. Expo の欠点
21. Native Modules が使えない
22. expo で使えるnpm packageか？
23. Check npm package • README.md • Getting Started • Installation • $react-native link • $rnpm link
24. Check source code
25. Check peerDependencies (package.json) "peerDependencies": { "react-native": ">=0.43.0", "react": ">=16.0.0-alpha.3", "react-native-vector-icons": "~4.1.1" },
26. OK • @expo/vector-icons • react-native-branch • react-native-fbads • react-native-maps • react-native-svg
27. どうしても途中で Native Modulesが必要に
28. $exp detach
29. $exp detach • ExpoKitとしてExpoのライブラリの機能は使える • Push Notificationsとかはダメ • Expo XDEは一応使える • react-native run-ios でええやん • exp publishでテスト不可に • XCode/Android Studioでビルド
30. OAuthとか
32. Deep link
33. Deep link import { Linking } from 'react-native'; const LINK_URI = Expo.Constants.linkingUri; : componentDidMount() { Linking.addEventListener('url', this._lnk.bind(this)); } _lnk(event) { let queryString = event.url.replace(LINK_URI, ''); const responseObj = qs.parse(queryString); const code = responseObj.code; this.getToken(code).then(…) }
34. Deeplink on Real device (app.json) "expo":{ "scheme": "qani" }
35. Expo.Constants.linkingUri • expo app内 • exp://exp.host/@pchw/*****/+ • Standalone Apps • qani://+
37. ビルド→実機チェック→ストア申請
38. ビルド Building Standalone Apps
39. Configure app.json(iOS ver) "name": "foo", "icon": "http://Ͳ͔ͬ.com", "version": “0.0.1”, "ios": { "bundleIdentifier": "com.bar.foo", "buildNumber": "1" },
40. $npm i -g exp $exp login $exp build:ios
42. $ exp build:status
44. 実機チェック
47. 初期ロードの制約 > The very first load cannot be offline
48. isRemoteJSEnabled: falseは "ios": { "isRemoteJSEnabled": false, },
49. exp build:ios ⊇ exp publish
50. まとめ • Expoはとても便利 • なるべくNative Modulesを使わない • どうしてもダメなら覚悟を決めてdetach • expo上でもdeep linkは確認できる • isJSRemoteEnabledはtrueのままの方が良い