1. React Native
8
Yukiya Nakagawa
#DevFest17 @Nkzn

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

3. • React Native 4
3 CI/CD
•
JS

7. 16% 22%
2% 60%

8. 98%

9. React Native
• React
• JS
•
• /PoC

10. 16% 22%
2% 60%

12. React Native
• React
• JS
•
• /PoC

15. 16% 22%
2% 60%

16. 16% 22%
2% 60%

17. 16% 22%
2% 60%

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

19. • init
• Android
• iOS

20. •
• React
• JS Redux
• AltJS TypeScript FlowType
•
•

21. /
React Native

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

24. A

25. 1. Getting Started

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

28. index.android.js
index.ios.js

29. • RN
”Write Once, Run Anywhere”
•

31. src

32. 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);

33. index.(android|ios).js
// index.android.js
import "./src";
// index.ios.js
import "./src";

34. •
• Flux, Redux
•

37. v0.49 Release Note

38. init
@v0.49

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

40. •
•
App.js src

41. src
•
• JSer React UI

42. 2. applicationId &
Bundle Identifier

43. applicationId

44. Bundle Identifier

45. Bundle Identifier

46. init

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

48. Xcode

49. init ID
•
• Android

50. ID

51. •
• applicationId Google Play
• Bundle Identifier AppStore
• com.[ ]
• iOS

52. ID
•
•
info.nkzn.kitchentimer

53. • Android _
−
• iOS −
_
•

55. • ID

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

58. Xcode

61. 3.

62. is

63. android {
defaultConfig {
versionCode 1
versionName "1.0"
android/app/build.gradle
ios/MyAwesomeApp/Info.plist

64. •
•
• Android versionCode

65. • Semantic Versioning(vX.Y.Z)
• X(major) UI
• Y(minor)
• Z(patch)

66. • JS
•
•
• Git
• package.json version
•

67. versionCode
• Google Play versionCode
• 1,2,3…
• v1.1.3(100) 101
v1.1.4 v1.2.0

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

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

70. “version”: “2.1.3-build4”
android {
defaultConfig {
versionName “2.1.3”
versionCode 2010304
node build.gradle Info.plist

71. 4. buildType
Android

72. •
•
• applicationId
•

73. applicationId
android {
buildTypes {
debug {
applicationIdSuffix ".debug"
}
}
android/app/build.gradle
💪

75. App Icon

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

77. [debug] …

78. A

79. B

80. •
•

81. 5. Fabric

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

84. 6. Fabric

85. •
• Google Play /
TestFlight
•

86. Beta
• Fabric
• Beta
• Fabric
←
• Android Studio Mac

87. 7. Fastlane

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

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

90. 8. Firebase

91. • https://firebase.google.com/
•
AB
MBaaS
• React Native Firebase
•
•

92. B

93. ○○

94. iOS
• iOS
• Schema Target

95. iOS CocoaPods
• CocoaPods iOS
• Google
•
• iOS
※

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

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

99. • React Native JS
•

100. JS
React Native