Нужно подготовить разметку нижней навигации.
Внутри View
со стилями styles.navbar
добавь четыре элемента Image
.
Эти изображения и будут кнопками нашей навигации.
Высота каждого изображения должна быть 40px, ширина - 60px.
Углы каждого изображения должны быть скруглены на 5px.
resizeMode
каждого изображения должен быть center
, что бы изображения были посередине кнопки.
Задний фон каждой кнопки должен быть rgba(26, 138, 173, 0.49)
.
source
первого изображения должен быть https://learn.coderslang.com/home.png
.
source
второго изображения должен быть https://learn.coderslang.com/like.png
.
source
третьего изображения должен быть https://learn.coderslang.com/search.png
.
source
четвертого изображения должен быть https://learn.coderslang.com/profile.png
.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
App.js
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.screen}>
<Text>Screen content</Text>
</View>
<View style={styles.navbar}></View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
screen: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#E39A28',
},
navbar: {
height: 70,
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 40,
paddingRight: 40,
},
});
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"
}
}
}