Successfully reported this slideshow.

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

56

Share

Upcoming SlideShare
少し幸せになる技術
少し幸せになる技術
Loading in …3
×
1 of 118
1 of 118

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

  1. 1. React Native 2017.3.9 DroidKaigi 2017 Yukiya Nakagawa / @Nkzn ROOM 3 17:10-17:40 #droidkaigi3
  2. 2. Who are you? • Yukiya Nakagawa / @Nkzn • @ • • • Android 2009
  3. 3. React Native
  4. 4. • • Hello World • Production
  5. 5. Target • Android / iOS • React React Native • React Native
  6. 6. Agenda • ‣ ‣ React ‣ React Native • ‣ React Native ‣ ‣
  7. 7. • React • React Native • React Native Before / After
  8. 8. • React (DOM) • ES201x • NPM • React Native
  9. 9. Biz
  10. 10. Biz • Android iOS • • •
  11. 11. https://www.kantarworldpanel.com/global/smartphone-os-market-share/
  12. 12. • • • iOS Android
  13. 13. 1
  14. 14. Android iOS OS UI WebView Cordova Xamarin Unity
  15. 15. React
  16. 16. React https://facebook.github.io/react/
  17. 17. • • JSX • Reactive
  18. 18. JSX
  19. 19. <div> <Header /> <LeftPane /> <RightPane /> </div>
  20. 20. React
  21. 21. import React from 'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );
  22. 22. Virtual DOM
  23. 23. React DOM
  24. 24. React DOM
  25. 25. React DOM
  26. 26. React DOM
  27. 27. https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
  28. 28. https://developer.android.com/reference/android/app/Activity.html
  29. 29. React is • Facebook JS • https://facebook.github.io/react/ • • • View View View
  30. 30. React Native (Side React)
  31. 31. Android View
  32. 32. Android <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <include layout="@layout/header" /> <include layout="@layout/left_pane" /> <include layout="@layout/right_pane" /> </RelativeLayout>
  33. 33. Android View <include layout= “@layout/header”/> android.view.View <include layout= “@layout/left_pane”/> <include layout= “@layout/right_pane”/>
  34. 34. • Fragment • • Advocating Against Android Fragments • https://medium.com/square-corner-blog/advocating-against- android-fragments-81fd0b462c97 • ( ) http://ninjinkun.hatenablog.com/entry/ 2014/10/16/234611
  35. 35. Android View
  36. 36. View DOM
  37. 37. Android View
  38. 38. View DOM
  39. 39. React is • Facebook JS • https://facebook.github.io/react/ • • • View View View
  40. 40. React DOM
  41. 41. import React from 'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') ); import ReactDOM from 'react-dom'; div div ReactDOM.render( <App />, document.getElementById('app') );
  42. 42. import React from "react"; import { View, AppRegistry } from "react-native"; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <View style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </View> ); } } AppRegistry.registerComponent( "App", () => App );
  43. 43. React ReactDOM
  44. 44. React UI React Native
  45. 45. React Native (Side Android)
  46. 46. Android iOS OS UI
  47. 47. React Native Android iOS OS UI
  48. 48. React Native Android (Side UI Component)
  49. 49. ReactRootView • FrameLayout • onMeasure JavaScriptCore JS JS
  50. 50. ReactRootView RootView (ReactActivityDelegate.java) protected ReactRootView createRootView() { return new ReactRootView(getContext()); } // protected void onCreate(Bundle savedInstanceState) { // if (mMainComponentName != null && !needsOverlayPermission) { loadApp(mMainComponentName); } // } protected void loadApp(String appKey) { if (mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, getLaunchOptions()); getPlainActivity().setContentView(mReactRootView); } https://github.com/facebook/react-native/blob/d21aa9248056b08449f4a0f57e824b3c52b0614b/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java#L67-L115
  51. 51. Activity ReactRootView JS
  52. 52. View
  53. 53. View <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions1}> To get started, edit index.android.js </Text> <Text style={styles.instructions2}> Shake or press menu button for dev menu </Text> </View>
  54. 54. react.gradle JS : import JS $buildDir/intermediates/ assets/index.android.bundle JS
  55. 55. React Native Android (Side Native Module)
  56. 56. JS UI
  57. 57. (Web API) https://developer.mozilla.org/ja/docs/Web/Reference/API
  58. 58. /Libraries/Core/Timers/JSTimers.js /ReactAndroid/src/main/java/com/facebook/react/modules/core/Timing.java (※ )
  59. 59. Polyfill https://facebook.github.io/react-native/docs/javascript-environment.html
  60. 60. • React View • API JS • UI ReactRootView UI
  61. 61. React Native Android iOS OS UI
  62. 62. http://facebook.github.io/react-native/showcase.html
  63. 63. https://design.google.com/articles/airbnb/
  64. 64. React Native
  65. 65. Biz • Android iOS • • •
  66. 66. Facebook JA
  67. 67. • iOS Cordova + React Web • 1 iOS/Android • React •
  68. 68. React Native
  69. 69. UI
  70. 70. CSS • CSS
  71. 71. const styles = StyleSheet.create({ container: { paddingTop: metrics.x4, paddingBottom: metrics.x2 }, logo: { height: 180, alignSelf: "center" }, loginBox: { marginTop: metrics.x4, marginHorizontal: metrics.x4 } });
  72. 72. <View style={styles.container}> … </View>
  73. 73. CSS • CSS • CSS • Bootstrap Material Design Lite • CSS React • OnsenUI material-ui
  74. 74. Android, iOS
  75. 75. Material Design const metrics = { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 12, x2: 16, x2_5: 20, x3: 24, x4: 32, x5: 40, x6: 48, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.android.js const metrics = { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 11, x2: 15, x2_5: 20, x3: 22, x4: 32, x5: 40, x6: 44, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.ios.js
  76. 76. • <Image> • • Android Picasso PhotoView • iOS UIScrollView JS http://square.github.io/picasso/ https://github.com/chrisbanes/PhotoView
  77. 77. React Native HelloWorld
  78. 78. JS • API • lodash
  79. 79. • API React Native • • API orz
  80. 80. • VSCode JS • Android/iOS Android iOS • JS R Live Reload • Android Studio Xcode
  81. 81. VSCode Android Studio Xcode Android iOS Live Reload
  82. 82. • JS localhost •
  83. 83. • Initial commit: 2 22 • v1.0.0 : 5 11
  84. 84. 2
  85. 85. CI • • Android Java, Android SDK • iOS OS X, Xcode, iOS SDK • Fastlane CocoaPods Ruby • mac mini
  86. 86. React Native
  87. 87. + React
  88. 88. • Web View React • Learn Once, Write Anywhere
  89. 89. • React Native • React Native • Breaking Change
  90. 90. Breaking Change
  91. 91. • React Native • React Native • Breaking Change
  92. 92. • • • v2 2
  93. 93. React Native
  94. 94. React Native
  95. 95. React Native
  96. 96. • WebView React • UI Native Component/Module • Android Java,
  97. 97. React Native
  98. 98. React Android
  99. 99. !

×