diff --git a/App.js b/App.js index d75ec5b..1adc389 100644 --- a/App.js +++ b/App.js @@ -12,6 +12,7 @@ import React from 'react'; import CommunityScreen from './src/screens/Community'; import HomeScreen from './src/screens/Home'; import TreasureScreen from './src/screens/Treasure'; +import ExploreScreen from './src/screens/Explore'; const Tab = createBottomTabNavigator(); @@ -31,6 +32,10 @@ const App = () => { name="Treasure" component={TreasureScreen} /> + ); diff --git a/src/screens/Explore.js b/src/screens/Explore.js new file mode 100644 index 0000000..d43b144 --- /dev/null +++ b/src/screens/Explore.js @@ -0,0 +1,161 @@ +import React, {useState} from 'react'; +import { + SafeAreaView, ScrollView, Image, + StatusBar, Text, View, TouchableOpacity, StyleSheet, TextInput, +} from 'react-native'; + +// CSSを適用するときに使用 +const styles = StyleSheet.create({ + headerButtonDisplay: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-evenly', + }, + headerDisplay: { + backgroundColor: '#9A8AB7', + paddingBottom: 20, + }, + headerInput: { + height: 40, + margin: 12, + borderWidth: 1, + padding: 10, + marginLeft: 50, + marginRight: 50, + marginTop: 15, + marginBottom: 20, + color: 'white', + backgroundColor:'#9A8AB7', + }, + headerButton: { + padding: 7, + borderColor: 'white', + borderWidth: 1, + borderRadius: 20, + }, +}); + +const ExploreScreen = () => { + return ( + + + {/* ヘッダー部分 */} + + + + + 人気のクリエイター + + + あなたにあったクリエイター + + + + + + {/* 本当はmapする */} + + + {/* アバター */} + + + {/* クリエイター詳細 */} + クリエイター名 + aaaa + Bio + aaaaaaaaaaaaaaaaaaaaaaaaa + + + + {/* 作品詳細をmapで横に並べる */} + + + + コメント数51 + Bbbbbbbbbbbb + Bbbbbbbbbbbb + + + + + + コメント数51 + Bbbbbbbbbbbb + Bbbbbbbbbbbb + + + + + + コメント数51 + Bbbbbbbbbbbb + Bbbbbbbbbbbb + + + + + + コメント数51 + Bbbbbbbbbbbb + Bbbbbbbbbbbb + + + + + + コメント数51 + Bbbbbbbbbbbb + Bbbbbbbbbbbb + + + + + + コメント数51 + Bbbbbbbbbbbb + Bbbbbbbbbbbb + + + + + + + + ); +}; + +export default ExploreScreen; diff --git a/src/screens/Home.js b/src/screens/Home.js index aaa8065..8632806 100644 --- a/src/screens/Home.js +++ b/src/screens/Home.js @@ -1,7 +1,9 @@ import React from 'react'; import { SafeAreaView, - StatusBar, Text, View + StatusBar, + Text, + View } from 'react-native'; const HomeScreen = () => { @@ -12,7 +14,7 @@ const HomeScreen = () => { Home View - ); + ) }; export default HomeScreen;