Thomas Chazot
2 years ago
parent
49d2683673
commit
40900ed0ed
@ -1,39 +1,68 @@
|
||||
import * as React from 'react'
|
||||
import { NavigationContainer } from '@react-navigation/native'
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
|
||||
import { createStackNavigator } from '@react-navigation/stack'
|
||||
|
||||
|
||||
import Home from '../screens/Home'
|
||||
import Store from '../screens/Store'
|
||||
import Chat from '../screens/Chat'
|
||||
import Settings from '../screens/Settings'
|
||||
|
||||
|
||||
import Test from '../screens/Test'
|
||||
|
||||
const Stack = createStackNavigator()
|
||||
|
||||
const HomeStack = createStackNavigator();
|
||||
|
||||
function MainStackNavigator() {
|
||||
function HomeStackScreen() {
|
||||
return (
|
||||
<HomeStack.Navigator screenOptions={{headerShown: false}}>
|
||||
<HomeStack.Screen name="Home" component={Home} />
|
||||
<HomeStack.Screen name="Settings" component={Settings} />
|
||||
</HomeStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const StoreStack = createStackNavigator();
|
||||
|
||||
function StoreStackScreen() {
|
||||
return (
|
||||
<StoreStack.Navigator screenOptions={{headerShown: false}}>
|
||||
<StoreStack.Screen name="Store" component={Store} />
|
||||
<StoreStack.Screen name="Settings" component={Settings} />
|
||||
</StoreStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const ChatStack = createStackNavigator();
|
||||
|
||||
function ChatStackScreen() {
|
||||
return (
|
||||
<ChatStack.Navigator screenOptions={{headerShown: false}}>
|
||||
<ChatStack.Screen name="Chat" component={Chat} />
|
||||
<ChatStack.Screen name="Settings" component={Settings} />
|
||||
</ChatStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const Tab = createBottomTabNavigator()
|
||||
|
||||
function MainTabNavigator() {
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator
|
||||
initialRouteName='Test'
|
||||
screenOptions={{headerShown: false,}}
|
||||
<Tab.Navigator
|
||||
initialRouteName='Home'
|
||||
backBehavior='none'
|
||||
screenOptions={{headerShown: false, tabBarStyle: { display: 'none' },}}
|
||||
>
|
||||
|
||||
<Stack.Screen
|
||||
name='Home'
|
||||
component={Home}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Store'
|
||||
component={Store}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name='Test'
|
||||
component={Test}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
<Tab.Screen name='Home' component={HomeStackScreen} />
|
||||
<Tab.Screen name='Store' component={StoreStackScreen} />
|
||||
<Tab.Screen name='Chat' component={ChatStackScreen} />
|
||||
<Tab.Screen name='Test' component={Test} />
|
||||
</Tab.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainStackNavigator
|
||||
|
||||
export default MainTabNavigator
|
||||
@ -0,0 +1,156 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||
import React from 'react';
|
||||
|
||||
const avatar = require('../../assets/Icons/BobClassic.png');
|
||||
const engrenage = require('../../assets/Icons/UnSelected/Engrenage.png');
|
||||
const gamepad = require('../../assets/Icons/UnSelected/Gamepad.png');
|
||||
const message = require('../../assets/Icons/Selected/SChat.png');
|
||||
const store = require('../../assets/Icons/UnSelected/Store.png');
|
||||
|
||||
function Store(props) {
|
||||
const { navigation } = props
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Pressable onPress={() => Alert.alert('Profil Joueur')}>
|
||||
<Image
|
||||
style={styles.avatar}
|
||||
source={avatar}
|
||||
/>
|
||||
</Pressable>
|
||||
<Text style={styles.titre}>BOB PARTY</Text>
|
||||
<Pressable onPress={() => navigation.navigate('Settings')}>
|
||||
<Image
|
||||
style={styles.engrenage}
|
||||
source={engrenage}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.body}>
|
||||
<Text style={styles.text}>couille</Text>
|
||||
</View>
|
||||
<View style={styles.footer}>
|
||||
<Pressable>
|
||||
<Image
|
||||
style={styles.iconFooter}
|
||||
source={message}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => navigation.navigate('Home')}>
|
||||
<Image
|
||||
style={styles.iconFooter}
|
||||
source={gamepad}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => navigation.navigate('Store')}>
|
||||
<Image
|
||||
style={styles.iconStore}
|
||||
source={store}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Button(props) {
|
||||
const { onPress, title = 'Save' } = props;
|
||||
return (
|
||||
<Pressable style={styles.button} onPress={onPress}>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: {
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
width: '70%',
|
||||
},
|
||||
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#45444E",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
},
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '30%',
|
||||
width: '100%',
|
||||
marginTop: '10%',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 32,
|
||||
borderRadius: 10,
|
||||
elevation: 3,
|
||||
backgroundColor: '#0085FF',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
header: {
|
||||
flex : 0.15,
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
titre: {
|
||||
flex: 0.7,
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
fontSize: 30,
|
||||
fontFamily: 'Helvetica',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
engrenage: {
|
||||
borderRadius: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
avatar: {
|
||||
borderRadius: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
|
||||
footer: {
|
||||
flex: 0.15,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
iconFooter: {
|
||||
marginBot: 25,
|
||||
marginTop: 10,
|
||||
width: 65,
|
||||
height: 50,
|
||||
},
|
||||
iconStore: {
|
||||
marginBot: 25,
|
||||
marginTop: 10,
|
||||
marginLeft: 7,
|
||||
marginRight: 8,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default Store
|
||||
@ -0,0 +1,131 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||
import React from 'react';
|
||||
|
||||
const msc = require('../../assets/Icons/FondGris.png');
|
||||
const engrenage = require('../../assets/Icons/Cross.png');
|
||||
|
||||
function Store(props) {
|
||||
const { navigation } = props
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
style={styles.engrenage}
|
||||
source={msc}
|
||||
/>
|
||||
<Text style={styles.titre}>Paramètres</Text>
|
||||
<Pressable onPress={() => props.navigation.goBack()}>
|
||||
<Image
|
||||
style={styles.engrenage}
|
||||
source={engrenage}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.body}>
|
||||
<Text style={styles.text}>couille</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Button(props) {
|
||||
const { onPress, title = 'Save' } = props;
|
||||
return (
|
||||
<Pressable style={styles.button} onPress={onPress}>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: {
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
width: '70%',
|
||||
},
|
||||
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#45444E",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
},
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '30%',
|
||||
width: '100%',
|
||||
marginTop: '10%',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 32,
|
||||
borderRadius: 10,
|
||||
elevation: 3,
|
||||
backgroundColor: '#0085FF',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
header: {
|
||||
flex : 0.15,
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
titre: {
|
||||
flex: 0.7,
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
fontSize: 30,
|
||||
fontFamily: 'Helvetica',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
engrenage: {
|
||||
borderRadius: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
avatar: {
|
||||
borderRadius: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
|
||||
footer: {
|
||||
flex: 0.15,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
iconFooter: {
|
||||
marginBottom: 25,
|
||||
marginTop: 10,
|
||||
width: 65,
|
||||
height: 50,
|
||||
},
|
||||
iconStore: {
|
||||
marginBottom: 25,
|
||||
marginTop: 10,
|
||||
marginLeft: 7,
|
||||
marginRight: 8,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default Store
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue