Weitere ähnliche Inhalte
Ähnlich wie Atomic Designは「マルチ」で真価を発揮する (20)
Mehr von Yukiya Nakagawa (20)
Kürzlich hochgeladen (20)
Atomic Designは「マルチ」で真価を発揮する
- 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
- 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>
);
- 61. const HogePage = (props) => (
<View style={{flex: 1}}>
{/* Template */}
</View>
);
- 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>
);
