Потренируемся заменять текст на кнопках переключения вкладок на иконки
Компонент App
должен возвращать только контейнер навигации с подлюченным навигатором вкладок.
В навигаторе должно быть два экрана.
Первый экран должен называться Github
, второй - Gitlab
.
На первом экране должен отображаться компонент screen/GitHubScreen
, на втором - screen/GitLabScreen
.
Эта задача — часть курса по 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"
}
}
}
components/TabBarIcon/index.js
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import github from '../../assets/github.png';
import gitlab from '../../assets/gitlab.png';
export default function TabBarIcon({ routeName, focused }) {
return (
<View style={[styles.container, { backgroundColor: focused ? '#D6DBD2' : '#F2F5EA' }]}>
<Image style={styles.icon} source={routeName === 'Github' ? github : gitlab} />
</View>
);
}
const styles = StyleSheet.create({
container: {
width: 30,
height: 30,
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
},
icon: {
width: 24,
height: 24,
},
});
screens/GitHubScreen/index.js
import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';
export default function GitHubScreen({ route: { params } }) {
return (
<View style={styles.container}>
<Text style={styles.header}>
GitHub, Inc. is a provider of Internet hosting for software development and version control
using Git. It offers the distributed version control and source code management (SCM)
functionality of Git, plus its own features. It provides access control and several
collaboration features such as bug tracking, feature requests, task management, continuous
integration and wikis for every project.[3] Headquartered in California, it has been a
subsidiary of Microsoft since 2018.
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical: 20,
paddingHorizontal: 30,
},
header: {
backgroundColor: 'white',
padding: 16,
borderRadius: 8,
color: '#4730EB',
marginBottom: 8,
fontSize: 14,
},
});
screens/GitLabScreen/index.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function GitLabScreen({ route: { params } }) {
return (
<View style={styles.container}>
<Text style={styles.header}>
GitLab is a web-based DevOps lifecycle tool that provides a Git-repository manager providing
wiki, issue-tracking and continuous integration and deployment pipeline features, using an
open-source license, developed by GitLab Inc. The software was created by Ukrainian
developers Dmitriy Zaporozhets and Valery Sizov.
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical: 20,
paddingHorizontal: 30,
},
header: {
backgroundColor: 'white',
padding: 16,
borderRadius: 8,
color: '#4730EB',
marginBottom: 8,
fontSize: 14,
},
});