ScrollView in React Native

Day 20 #100DaysOfCode

Scrollview là một component cho phép chứa nhiều thành phần, để ta có thể scroll lên xuống, bên cạnh đó ta có thể cấu hình để scroll theo chiều ngang cũng được bằng cách ta thêm thuộc tính "horizontal" này vào Scrollview

Okay, ta hãy tạo một component để chứa ScrollView, ta sẽ tạo một project để cấu hình thôi, các bạn có thể xem lại bài dưới để tạo project
Setup React Native on PC and Mac,Install React Native on PC and Mac
+ Tạo project react native

npm install -g expo-cli
expo init CreateScrollView
cd CreateScrollView
npm start or expo start

Tạo file theo đường dẫn sau src/components/Home.js, component Home dùng để cấu hình dữ liệu show ra cho người dùng xem
+ src/components/Home.js

import React from 'react'
import { View, Text, StyleSheet,SafeAreaView ,ScrollView } from 'react-native'
const Home = () => {
    const products = [
        { "id": 1, "title": "Iphone 12 Pro Max 256GB","price":"2000" },
        { "id": 2, "title": "Iphone 12 256GB","price":"1800" },
        { "id": 3, "title": "Iphone 12 128GB","price":"1600" },
        { "id": 4, "title": "Iphone 12 64GB","price":"1400" },
        { "id": 5, "title": "Iphone 11 Pro Max 256GB","price":"1900" },
        { "id": 6, "title": "Iphone 11 256GB","price":"900" },
        { "id": 7, "title": "Iphone 11 128GB","price":"800" },
        { "id": 8, "title": "Iphone 11 64GB","price":"600"},
        { "id": 9, "title": "Iphone Xr 256GB","price":"1900" },
        { "id": 10, "title": "Iphone X 256GB","price":"900" },
        { "id": 11, "title": "Iphone X 128GB","price":"800" },
        { "id": 12, "title": "Iphone X 64GB","price":"600"}
    ];
    const renderItem = (item,index)=>{

       return  <View style={styles.itemProduct} key={index} onClick={()=>alert(JSON.stringify(item))}>
                    <View style={styles.boxInfo}>
                        <Text style={styles.titleProduct}>{item.title}</Text>
                        <Text style={styles.priceProduct}>{item.price}$</Text>
                    </View>
                </View>
    }
    return (
        <>
            <SafeAreaView style={styles.container}>
                <View style={styles.boxList}>
                    <Text style={styles.titleList}>List a Iphone</Text>
                </View>
                <View style={styles.boxProduct}>
                    <ScrollView style={{flex:1}}>
                        
                        {products.length>0 && products.map((item,index)=>renderItem(item,index))}
                    </ScrollView>

                </View>
            </SafeAreaView>
        </>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    boxList: {
        paddingVertical: 10,
        backgroundColor: '#2196F3'
    },
    titleList: {
        color: '#fff',
        fontSize: 20,
        textAlign: 'center'
    },
    boxProduct: {
        flex:1,
        paddingVertical: 10,
        marginHorizontal: 10
    },
    itemProduct: {
        backgroundColor: "#fff",
        borderRadius: 50,
        paddingVertical: 10,
        marginVertical: 5
    },
    boxInfo:{
        flexDirection:'row',
        alignItems:'center',
        paddingHorizontal: 10,
    },
    titleProduct: {
        flex:1,
        fontSize: 18,
        fontWeight: 'bold',
    },
    priceProduct:{
        fontSize:18,
        color:'red',
         fontWeight: 'bold'
    }
})
export default Home;

Đoạn code trên ta cần thêm các thành phần React native cần dùng trong component Home

import { View, Text, StyleSheet,SafeAreaView ,ScrollView } from 'react-native'

Ta tạo một mảng danh sách dữ liệu cần show ra

const products = [
        { "id": 1, "title": "Iphone 12 Pro Max 256GB","price":"2000" },
        { "id": 2, "title": "Iphone 12 256GB","price":"1800" },
        { "id": 3, "title": "Iphone 12 128GB","price":"1600" },
        { "id": 4, "title": "Iphone 12 64GB","price":"1400" },
        { "id": 5, "title": "Iphone 11 Pro Max 256GB","price":"1900" },
        { "id": 6, "title": "Iphone 11 256GB","price":"900" },
        { "id": 7, "title": "Iphone 11 128GB","price":"800" },
        { "id": 8, "title": "Iphone 11 64GB","price":"600"},
        { "id": 9, "title": "Iphone Xr 256GB","price":"1900" },
        { "id": 10, "title": "Iphone X 256GB","price":"900" },
        { "id": 11, "title": "Iphone X 128GB","price":"800" },
        { "id": 12, "title": "Iphone X 64GB","price":"600"}
    ];

Bạn có thể dùng restful API để lấy trực tiếp dữ liệu về và show ra, bạn có thề xem lại bài viết sau

+ RESTFUL API USING REACT
+ RENDER DATA IN REACT 

Render dữ liệu từ mảng products ra, ta sử dụng products.map() để thực hiện tác dụ này

<ScrollView style={{flex:1}}>                    
    {products.length>0 && products.map((item,index)=>renderItem(item,index))}
</ScrollView>

renderItem : là một hàm nhận item và position(index) để xử lý data, sau đó return về

const renderItem = (item,index)=>{

       return  <View style={styles.itemProduct} key={index} onClick={()=>alert(JSON.stringify(item))}>
                    <View style={styles.boxInfo}>
                        <Text style={styles.titleProduct}>{item.title}</Text>
                        <Text style={styles.priceProduct}>{item.price}$</Text>
                    </View>
                </View>
    }

Tiếp theo ta cần phải xử lý giao diện cho đẹp xíu, ta sử dụng StyleSheet để viết css cho chúng

const styles = StyleSheet.create({
    //you write css
});

Ở trên là mình viết ScrollView theo chiều dọc, nếu bạn nào muốn nó hiển thị theo chiều ngang thì thêm thuộc tính horizontal={true} vào component ScrollView như sau:

<ScrollView horizontal={true}></ScrollView>

Mọi người có thể tìm hiểu thêm về ScrollView tại đây : https://reactnative.dev/docs/scrollview