Thư viện React Native để Phát hiện Trẻ em được Tập trung trong ScrollViews

react-native-focus-scroll

react-native-focus-scroll có thể phát hiện được trẻ em nào đang được tập trung khi cuộn.

Cài đặt

$ npm i react-native-focus-scroll

CÔNG VIỆC ĐANG CHỜ

• Thêm FocusScrollView
• Hỗ trợ cuộn ngang
• Thêm một ví dụ trên Android

Sử dụng

import React, { Component } from 'react';
import {
    View,
    Image,
} from 'react-native';

import { FocusScrollView } from 'react-native-focus-scroll';

class BeerComponent extends Component {
    render() {
        let style;
        if (this.props.isFocused) {
            style = {opacity: 1};
        } else {
            style = {opacity: 0.4};
        }

        return (
            <Image style={[style, {width: 200, height: 200, position: "absolute"}]} source={{uri: this.props.url}} />
        )
    }
}

export default class example extends Component {
    render() {
        const urls = [
            "https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/paulaner.jpg?raw=true",
            "https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/kilkenny.jpg?raw=true",
            "https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/guiness.jpg?raw=true",
            "https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true",
        ];

        return (
            <View style={styles.container}>
                <FocusScrollView threshold={100}>
                    {urls.map((url, index) => <BeerComponent key={index} imageUrl={url} />)}
                </FocusScrollView>
            </View>
        );
    }
}

Thuộc tính

Tất cả các thuộc tính được truyền vào ScrollView được bao bọc bởi FocusScrollView.

ngưỡng

• kiểu: số nguyên
• bắt buộc?: tùy chọn
• mặc định: 100

Nếu khoảng cách giữa trung tâm của FocusScrollView và trung tâm của mỗi trẻ em vượt quá một ngưỡng, mục của FocusScrollView được tập trung.

whetherIsFocused

• kiểu: hàm(size, margin) bool {}
• bắt buộc?: tùy chọn

Để thay thế cách xác định xem trẻ em có được tập trung không. Hàm mặc định như sau.

whetherIsFocused(size, margin) {
    const distance = Math.abs((size.y + size.height / 2) - this.getCenterY());
    return distance < margin;
}

Chi tiết tải về:

Tác giả: c-bata
Nguồn: https://github.com/c-bata/react-native-focus-scroll

Giấy phép: MIT license