React native vs code Page7.js , Task3(1).pdf

React native vs code Page7.js , Task3(1).pdf

1. 9
File
JS Page2,js
Demo > pages > J5 Page7js > tel styles > title >height
10
11
12
13
15
14
16
17
18
19
20
21
22
Edit Selection View Go Run
8
23
7
24
25
26
2
27
28
29
JS Appjs
1 import { FlatList, StyleSheet, Text, View, Image ) from 'react -native';
import { MaterialIcons } from '@expo/vector-icons';
export default function Pagel(){
const data = t
J;
JS Page1js
const render = (item}) => (
JS Page3js
<View style=(styles . itemContainer ) >
{ id:1, name: 'BMW', imgurl: 'https://tse3. mm.bing. net/th?id=0IP . nf3s6fe-iXgDTh 5IAzHSjgHaEK&pid=Api&P=0&h=180 ,
{ id:2, name: 'MERCEDES', imgurl: 'https://tse1. mm.bing. net/th?id=0IP .hl2 PAGMnHNTsWE uDhBk6vgHaEK&pid=Api&P=0&h=18e },
{ id:3, name: 'LAMBORGHINI', imgurl: 'https://tsel. mm.bing. net/th?id=OIP. dsiC7a1xQd -CPZpBuMeCDgHaE8&pid=Api&P=p&h=180
{ id:4, name: 'AUDI', imgurl: "https://tse2. mm.bing. net/th?id=0IP.ic4LckUp_x_Rg4Tp-SRf-QHaEo&pid=Api&P=0&h=180
{ id:5, name: "VOLVO, imgurl:'https://tse4. mm. bing.net/th?id=0IP .HgVz-IuMQZvCN7pzeNZZAHaEK&pid=Api&P=08h=180 },
{ id:6, name: 'PORSCHE', imgurl: 'https:1/tse2. mm. bing. net/th?id=0IP.YYcil-4PFTmdv94TJ hULYAHaEo&pid=Api&P=0&h=180' },
{ id:7, name: 'FERRARI', imgurl: "https://tse1. mm.bing. net/th?id=0IP. 2YoG60JeSDffcppOngY9 gwHaEe&pid=Api&P=0&h=180
JS Page4,js
{ id:8, name: 'BUGATTI', imgurl: 'https://tse4. mm.bing. net/th?id=0IP.6CHTHeH1goR4Uxa -TkJetwHaEf&pid=Api&P=0&h=180"
<Text style={styles . title) > {item . name)</Text>
<View style={styles. iconContainer) >
<Image source={{ uri: item. imgurl }} style=(sty les . image} I>
<View style={styles. icon}>
return(
O react native
</View>
</View>
</View>
JS Page5js
<MaterialIcons name=' add-shopping-cart' size={50} />
JS Page6.js Js Page7js

2. 32
33
34
3e
31
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
53
52
54
55
56
57
}
<FlatList data={data)
keyExtractor= (e=>e.id)
renderItem={render}
const styles = StyleSheet. create ({
itemContainer:
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between' ,
padding: 10,
image: {
width: 100,
height: 100,
alignSelf: 'flex-start',
title:
alignSelf: 'center,
height:4
icon: {
marginRight: 10,
iconContainer: {
flexDirection: 'row',
alignItems: 'flex-end',
I

4. JS Page2js
Demo > JS Appjs > App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
JS Appjs
23
1| import { StatusBar } from 'expo-status-bar';
from'./pages/Page7';
import { StyleSheet, Text, View, FlatList } from 'react -native';
import Page7
export default function App() {
return (
<View>
<Page7/>
JS Page1js
</View>
const styles = StyleSheet. create ({
container: {
flex: 1,
JS Page3,js
alignItems: 'center',
I
JS Page4js
H
JS Page5js JS Page6.js JS Pa

5. 24
25
26
27
justifyContent: 'center',

6. RIEGER
6:13 9
1.64
MB/S () NR 5G+1
BMW
MERCEDES
LAMBORGHINI
AUDI
VOLVO
PORSCHE
FERRARI
Cannot record touch end without a touch start...
BUGATTI

7. RIEGER
0.76
KB/S ()R 5G+A022%
MERCEDES
LAMBORGHINI
AUDI
VOLVO
PORSCHE
FERRARI
BUGATTI