-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
79 lines (71 loc) · 2.71 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { StyleSheet, Text, View, Image, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
function ImageScreen() {
return (
<View>
<Image
source={require('./assets/le-chateau-de-pierrefonds.jpg')}
style={styles.image} />
</View>
);
}
function TextScreen() {
return (
<View>
<Text style={styles.text}>Le château de Pierrefonds est un imposant château fort construit à la fin du xive siècle, qui se dresse sur la commune française de Pierrefonds, dans le département de l'Oise, en région des Hauts-de-France, à la lisière sud-est de la forêt de Compiègne, au nord de Paris.
{'\n\n'}
Le château de Pierrefonds présente la plupart des caractéristiques de l'ouvrage défensif du Moyen Âge, en fait une interprétation du style troubadour du xixe siècle, très en vogue au Second Empire dans les classes aisées. Il fut reconstruit à cette époque pour Napoléon III par Viollet-le-Duc, qui y entreprit également d'importants travaux de création de décoration et de mobilier.
{'\n\n'}
Le château fait l’objet d’un classement au titre des monuments historiques par la liste de 18621. Il est géré par le Centre des monuments nationaux3.
{'\n\n'}
Il a également été le lieu de tournage de la série Merlin.</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let os;
Platform.OS === 'ios' ? os = 'ios-' : os = '';
if (route.name === 'Image') {
iconName = focused
? os + 'image'
: os + 'image-outline';
} else if (route.name === 'Text') {
iconName = focused
? os + 'document-text'
: os + 'document-text-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Image" component={ImageScreen} />
<Tab.Screen name="Text" component={TextScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
image: {
width: '100%',
resizeMode: 'contain',
},
text: {
padding: 20
},
});