Потренируемся добавлять скрываемую навигацию.
Компонент App должен быть навигационным контейнером с Drawer навигатором.
Нужно добавить три экрана с именами Asia
, Europe
, NorthAmerica
- именно в этом порядке.
Компоненты для экранов соответсвенно: screens/AsiaCities
, screens/EuropeCities
, screens/NorthAmericaCities
.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
App.js
import React from 'react';
export default function App() {
return null;
}
app.json
{
"expo": {
"name": "1",
"slug": "1",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
screens/AsiaCities/index.js
import React from 'react';
import { View, Text } from 'react-native';
import styles from '../styles';
export default function AsiaCities() {
return (
<View style={styles.container}>
<Text style={styles.header}>Asia</Text>
<Text style={styles.city}>1. Tokyo (Japan)</Text>
<Text style={styles.city}>2. Delhi (India)</Text>
<Text style={styles.city}>3. Shanghai (China)</Text>
<Text style={styles.city}>4. Beijing (China)</Text>
<Text style={styles.city}>5. Mumbai (India)</Text>
</View>
);
}
screens/EuropeCities/index.js
import React from 'react';
import { View, Text } from 'react-native';
import styles from '../styles';
export default function EuropeCities() {
return (
<View style={styles.container}>
<Text style={styles.header}>Europe</Text>
<Text style={styles.city}>1. Istanbul (Turkey)</Text>
<Text style={styles.city}>2. Moscow (Russia)</Text>
<Text style={styles.city}>3. Paris (France)</Text>
<Text style={styles.city}>4. London (United Kingdom)</Text>
<Text style={styles.city}>5. Madrid (Spain)</Text>
</View>
);
}
screens/NorthAmericaCities/index.js
import React from 'react';
import { View, Text } from 'react-native';
import styles from '../styles';
export default function NorthAmericaCities() {
return (
<View style={styles.container}>
<Text style={styles.header}>North America</Text>
<Text style={styles.city}>1. Mexico City (Mexica)</Text>
<Text style={styles.city}>2. New York City (USA)</Text>
<Text style={styles.city}>3. Los Angeles (USA)</Text>
<Text style={styles.city}>4. Toronto (Canada)</Text>
<Text style={styles.city}>5. Chicago (USA)</Text>
</View>
);
}
screens/styles.js
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
paddingVertical: 20,
paddingHorizontal: 30,
},
header: {
fontWeight: 'bold',
fontSize: 24,
marginBottom: 20,
textAlign: 'center',
},
city: {
marginBottom: 8,
},
});