Потренируемся добавлять переходы между экранами
Компонент App
должен возвращать только контейнер навигации с подключенным стэк навигатором.
В стэке должен быть два экрана - первый с именем Frontend
, а второй с именем Backend
.
Первый экран должен отображать компонент screens/FrontendScreen
, второй - screens/BackendScreen
При этом первым должен загружаться экран Frontend
.
Не изменяй компоненты screens/FrontendScreen
и screens/BackendScreen
.
Эта задача — часть курса по 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/BackendScreen/index.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
export default function BackendScreen() {
return (
<View style={styles.container}>
<Text style={styles.header}>Backend stack</Text>
<View style={styles.list}>
<Text>1. Node.js</Text>
<Text>2. Express</Text>
<Text>3. Mongo</Text>
<Text>4. MySQL</Text>
</View>
<Button title="Check FE stack" />
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 20,
},
header: {
marginVertical: 10,
fontWeight: 'bold',
},
list: {
marginBottom: 10,
},
});
screens/FrontendScreen/index.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
export default function FrontendScreen() {
return (
<View style={styles.container}>
<Text style={styles.header}>Frontend stack</Text>
<View style={styles.list}>
<Text>1. HTML, CSS</Text>
<Text>2. JS</Text>
<Text>3. React, React-native</Text>
<Text>4. Styled components</Text>
</View>
<Button title="Check BE stack" />
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 20,
},
header: {
marginVertical: 10,
fontWeight: 'bold',
},
list: {
marginBottom: 10,
},
});