React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み

React Native
8
Yukiya Nakagawa
#DevFest17 @Nkzn

• @Nkzn /
• /
•
• React Native v0.17
• DroidKaigi  
2018 CfP 15

• React Native 4
3 CI/CD
•
JS

React Native
• React
• JS
•
• /PoC

• React Native JSer
• RN create-react-native-
app Expo
JSer
• JS React npm android/ ios/

•
• React
• JS Redux
• AltJS TypeScript FlowType
•
•

Agenda
•
1.Getting Started
2.applicationId/Bundle Identiﬁer
3.
4.[Android] buildType
5.Fabric
6.Fabric
7.Fastlane
8.Firebase

init
$ npm install -g react-native-cli
$ react-native init MyAwesomeApp
$ cd MyAwesomeApp

• RN  
 
”Write Once, Run Anywhere”
•

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";

index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyAwesomeApp', () => App);

2. applicationId & 
Bundle Identiﬁer

android/app/build.gradle
android {
defaultConfig {
applicationId "com.myawesomeapp"

•
• applicationId Google Play
• Bundle Identiﬁer AppStore
• com.[ ]
• iOS

ID
•
•
info.nkzn.kitchentimer

• Android _  
−
• iOS −  
_
•

android { 
defaultConfig { 
versionCode 1 
versionName "1.0"
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
•
• 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

applicationId
android { 
buildTypes { 
debug { 
applicationIdSuffix ".debug" 
}
}
💪

<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>

Fabric
• https://get.fabric.io/
• Twitter
• Crashlytics
• Google Firebase

•
• Google Play /
TestFlight
•

Beta
• Fabric
• Beta
• Fabric
←
• Android Studio Mac

• https://fastlane.tools/
• iOS/Android
• Google Play/iTunes
Connect
• CI GitLab CI
• Ruby 🤔

1. Git
2. CI Fastlane
3. Google Play/
iTunes Connect 🚀
4. 🎉

• https://ﬁrebase.google.com/
•
AB
MBaaS
• React Native Firebase
•
•

iOS CocoaPods
• CocoaPods iOS
• Google
•
• iOS
※

JS
•
•
• Sentry https://sentry.io/
RN

• Android SDK, Android Studio
• iOS SDK, Xcode
• npm
• Ruby (Fastlane )

React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み

More Related Content

React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.