Потренируемся с вложенностью навигаторов
Компонент App
должен возвращать контейнер навигации с подключенным стэк навигатором.
В этом навигаторе должно быть два экрана. Первый с именем Home
должен отображать компонент screens/Home
.
У экрана Home
хедер должен быть скрыт.
Второй должен отображать навигатор вкладок с именем Settings
.
Первым экраном навигатора вкладок должен стать компонент screens/Profile
с именем Profile
.
Второй экран - screens/Settings
с именем Settings
. Третий - screens/CV
с именем CV
Эта задача — часть курса по 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/CV/index.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function CV() {
return (
<View style={styles.container}>
<Text>CV will be here</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
});
screens/Home/index.js
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
export default function Home() {
return (
<View style={styles.container}>
<Text>Here will be the home screen of our career boost app</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonLabel}>Check CV section</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
button: {
backgroundColor: '#4730EB',
padding: 4,
borderRadius: 4,
marginTop: 10,
},
buttonLabel: {
color: 'white',
},
});
screens/Profile/index.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Profile() {
return (
<View style={styles.container}>
<Text>User Profile will be here</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
});
screens/Settings/index.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Settings() {
return (
<View style={styles.container}>
<Text>App Settings will be here</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
});