react nativeアプリをリリースし続けるために、最初に行う8つの取り組み
TRANSCRIPT
React Native
8Yukiya Nakagawa
#DevFest17 @Nkzn
• @Nkzn /
• /
•
• React Native v0.17
• DroidKaigi
2018 CfP 15
• React Native 4
3 CI/CD
•
JS
16% 22%
2% 60%
98%
React Native
• React
• JS
•
• /PoC
16% 22%
2% 60%
React Native
• React
• JS
•
• /PoC
16% 22%
2% 60%
16% 22%
2% 60%
16% 22%
2% 60%
• React Native JSer
• RN create-react-native-
app Expo
JSer
• JS React npm android/ ios/
• init
• Android
• iOS
•
• React
• JS Redux
• AltJS TypeScript FlowType
•
•
/
React Native
Agenda
•
1.Getting Started
2.applicationId/Bundle Identifier
3.
4.[Android] buildType
5.Fabric
6.Fabric
7.Fastlane
8.Firebase
A
1. Getting Started
init
$ npm install -g react-native-cli$ react-native init MyAwesomeApp$ cd MyAwesomeApp
index.android.js
index.ios.js
• RN
”Write Once, Run Anywhere”
•
src
src/index.js
import React, { Component } from 'react'; import { AppRegistry, Text, View, StyleSheet } from 'react-native';
export default class App extends Component { render() { return ( <View style={styles.container}> <Text style={styles.center}> Hello, World! </Text> </View> ); } } const styles = {/* */}; AppRegistry.registerComponent('MyAwesomeApp', () => App);
index.(android|ios).js
// index.android.js import "./src";
// index.ios.js import "./src";
•
• Flux, Redux •
v0.49 Release Note
init @v0.49
index.js
import { AppRegistry } from 'react-native'; import App from './App';
AppRegistry.registerComponent('MyAwesomeApp', () => App);
•
•
App.js src
src
•
• JSer React UI
2. applicationId &Bundle Identifier
applicationId
Bundle Identifier
Bundle Identifier
init
android/app/build.gradle
android { defaultConfig { applicationId "com.myawesomeapp"
Xcode
init ID
• • Android
ID
•
• applicationId Google Play
• Bundle Identifier AppStore
• com.[ ]
• iOS
• Android _
−
• iOS −
_
•
android/app/build.gradle
android { defaultConfig { applicationId "com.myawesomeapp"
Xcode
3.
is
android { defaultConfig { versionCode 1 versionName "1.0"
android/app/build.gradle
ios/MyAwesomeApp/Info.plist
•
•
• Android versionCode
• Semantic Versioning(vX.Y.Z)
• X(major) UI
• Y(minor)
• Z(patch)
• JS
•
•
• Git
• package.json version
•
versionCode
• Google Play versionCode
• 1,2,3…
• v1.1.3(100) 101
v1.1.4 v1.2.0
versionCode
def major = 2; def minor = 1; def patch = 3; android { defaultConfig { versionName "${major}.${minor}.${patch}" // 2.1.3 versionCode major * 10000 + minor * 100 + patch * 1 // 20103
android/app/build.gradle
•
• Google Play
def major = 2; def minor = 1; def patch = 3; def build = 4; android { defaultConfig { versionName "${major}.${minor}.${patch}" // 2.1.3 versionCode major * 1000000 + minor * 10000 + patch * 100 + build // 2010304
“version”: “2.1.3-build4”
android { defaultConfig { versionName “2.1.3” versionCode 2010304
node build.gradle Info.plist
4. buildTypeAndroid
•
•
• applicationId
•
applicationId
android { buildTypes { debug { applicationIdSuffix ".debug" } }
android/app/build.gradle
💪
App Icon
<resources> <string name=“app_name”>[debug]MyAwesomeApp</string></resources>
android/app/src/debug/res/values/strings.xml
android/app/src/release/res/values/strings.xml
<resources> <string name=“app_name”>MyAwesomeApp</string></resources>
[debug] …
A
B
•
•
5. Fabric
6. Fabric
•
• Google Play /
TestFlight
•
Beta
• Fabric
• Beta
• Fabric
←
• Android Studio Mac
7. Fastlane
• https://fastlane.tools/
• iOS/Android
• Google Play/iTunes
Connect
• CI GitLab CI
• Ruby 🤔
1. Git
2. CI Fastlane
3. Google Play/
iTunes Connect 🚀
4. 🎉
8. Firebase
B
○○
iOS
• iOS
• Schema Target
iOS CocoaPods
• CocoaPods iOS
•
• iOS※
• Android SDK, Android Studio
• iOS SDK, Xcode
• npm
• Ruby (Fastlane )
• React Native JS
•
JS
React Native
