3 File Edit Selection View Go O react native D D 08
JS Appjs JS Page1js JS Page3js JS Page4.js JS Page5js JS Page6.js JS Page7js JS Page8js
Demo > pages > S Page8,js > Page1
1 import { StyleSheet, Text, View}from 'react-native';
2 export default function Page1 (){//data map
3 const data=[
4 {id:1, Name:"SHOES", price :500},
5 (id:2, Name: "T-SHIRT", price : 300},
6 {id:3, Name: "SHIRT" , price : 500),
7 {id:4, Name:"JEANS", price:1000)},
(id:5, Name: "SUNGLASSES" , price:150),
{id:6, Name: "WATCH" , price: 500),
10
11 1 I
12 const FilterData=data . filter((item) => (item. price>=300) )
13 return(
14 kView
15 <Text style={styles . headline) >data map</Text>
16 {data.map( (item) => (
17 <View key={item. id} >
18 <View style=(styles. itemContainer}>
19 <Text>{item. Name} </Text>
20 <View style={styles . pricesContainer}>
21 <View style={styles . prices} >
22 <Text>price: (item. price)</Text>
23 </View>
24 </View>
25 </View>
26 </View>
27
28 (Text style=(styles.headline}>Filtered Data</Text>
29 {FilterData . map( (e)=> (
30
<View style={styles . itemContainer}>
31 <Text>{e . Name} </ Text>
32 <View style={styles . pricesContainer}>
33 I
<View style-{styles.prices}>
34
<Text>price:{e.price} </ Text>
35 </View>
36 </View>
37 </View>
38 0)}
39 </View>
40
41
42
43 const styles = StyleSheet. create ({
44 itemContainer: {
45
flexDirection: 'row',
46
alignItems : 'flex-start'
47
justify Content : 'space-between',
48 padding: 20,
49
50 pricesContainer: {
51 flexDirection: 'row',
52 alignItems:'flex-end',
53
I
54 prices: {
55 marginRight: 20,
56
57 headline: {
58 fontWeight: 'bold'.
59 fontSize: 40,
60 justifyContent: 'center '
61 alignItems: 'center',
62
63
File Edit Selection View Go Oreact native D e 0 08
JS Page2,js JS Appjs JS Page1js JS Page3js JS Page4js JS Page5,js JS Page6js JS Page
Demo > JS Appjs > App
| import ( StatusBar ) from 'expo-status -bar';
2 import { StyleSheet, Text, View, FlatList } from 'react -native';
3 import Page8
4 from'./ pages/ Page8';
export default function App() {
7
8 return
9
10 <View
I
11
12
13 <Page8/>
14
15 </View>
16
17
18
19 const styles = StyleSheet. create({
20
21 container: {
22 flex: 1,
23
24 alignItems: 'center',
25 JustifyContent: center',
26
27
28
data map
0.73 Vo
KB/S NR 5G+ 51%
SHOES price:500
T-SHIRT price:300
SHIRT price:500
JEANS price:1000
SUNGLASSES price:150
WATCH price:500
Filtered Data
SHOES price:500
T-SHIRT price:300
SHIRT price:500
JEANS price:1000
WATCH price:500
