The document discusses Atomic Design principles and how they can be applied to React Native applications. It describes building user interfaces using atoms, molecules and organisms, then combining these into pages. It provides examples of templates for mobile, tablet and web pages, and how pages are constructed by passing components to templates and handling navigation.

1. Atomic Design
@Nkzn
2018.11.9 WCI Tech Night #1

2. • Atomic Design Atomic Design
• Atoms Molecules Organisms
• Pages Template
• React Native React Native for Web
https://watercelldev.hatenablog.jp/entry/2018/07/18/122604

3. Atomic Design

4. ※

21. Atomic Design

23. Atomic Design

24. 2

28. Atomic Design

29. • Organisms
• Molecules
• Atoms
Pages Templates

30. MOTTAINAI

31. Atomic Design
Organisms

32. Pages Templates

34. A

37. 7 10

39. Web

42. History
React URL

43. •
• React Navigation
•
• React Router

45. A

46. B

47. Pages Templates

48. 7 10

49. Template

52. Template
const MobileTemplate = (props) => (
<View>
<View style={/* */}>
{props.renderHeader()}
</View>
<View style={/* */}>
{props.renderContent()}
</View>
</View>
);

53. 7 Template
const Tab7Template = (props) => (
<View>
<View style={/* */}>
{props.renderHeader()}
</View>
<View style={/* 7 */}>
{props.renderLeft()}
</View>
<View style={/* 7 */}>
{props.renderRight()}
</View>
</View>
);

54. 10 Template
const Tab10Template = (props) => (
<View>
<View style={/* */}>
{props.renderHeader()}
</View>
<View style={/* 10 */}>
{props.renderLeft()}
</View>
<View style={/* 10 */}>
{props.renderRight()}
</View>
</View>
);

55. Page
import { Header, Menu } from "./organisms";
const HogeMobilePage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {/* */}}/>
)}/>
</View>
);

56. Page
import { Header, Menu, Content } from "./organisms";
const HogeTablet7Page = (props) => (
<View style={{flex: 1}}>
<Tab7Template
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderLeft={() => (
<Menu navigateB={() => {/* */}}/>
)}
renderRight={() => (
<Content navigateC={() => {/* */}}/>
)}/>
</View>
);

57. Page
import { Header, Menu, Content } from "./organisms";
const HogeTablet10Page = (props) => (
<View style={{flex: 1}}>
<Tab10Template
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderLeft={() => (
<Menu navigateB={() => {/* */}}/>
)}
renderRight={() => (
<Content navigateC={() => {/* */}}/>
)}/>
</View>
);

58. Template

59. Pages

61. const HogePage = (props) => (
<View style={{flex: 1}}>
{/* Template */}
</View>
);

62. Pages

63. Pages
• Template
• Template Redux
•
Pages

64. Web

65. Pages

66. Pages
props
const HogeMobileXXXPage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {/* */}}/>
)}/>
</View>
);

67. Web
const HogeMobileWebPage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {
props.history.push("/content");
}}/>
)}/>
</View>
);

68. const HogeMobileNativePage = (props) => (
<View style={{flex: 1}}>
<MobileTemplate
renderHeader={() => (
<Header navigateA={() => {/* */}}/>
)}
renderContent={() => (
<Menu navigateB={() => {
props.navigation.navigate("ContentPage");
}}/>
)}/>
</View>
);

69. Pages
•
•
• Pages

70. Pages
• Web
• Template Web
•

71. Pages

72. Atomic Design