ReactNative第三方UI庫

1. lottie-react-native動畫庫github以及官網
   可以用於頁面載入時的動畫

import React, {FC} from "react";
import {SafeAreaView, ScrollView, Text} from "react-native";
import Lottie from 'lottie-react-native';


interface Props {

}

const LottieReactNative: FC<Props> = () => {
    const animationRef = React.useRef<Lottie | null>(null);

    React.useEffect(() => {
       
    }, []);

    return <SafeAreaView>
        <ScrollView>
            <Lottie source={require('./animation.json')} autoPlay loop style={{width: 100}}/>
        </ScrollView>
    </SafeAreaView>;
};

export default LottieReactNative;

2. react-icomoon輕量圖示

import React from "react";
import {SafeAreaView, ScrollView} from "react-native";
import IcoMoon, {iconList} from "react-icomoon";
const iconSet = require('./selection.json');
import { Svg, Path } from 'react-native-svg';

const ReactIcoMoon = () => {
    React.useEffect(() => {

    }, []);
    return <SafeAreaView>
        <ScrollView>
            <IcoMoon
                native
                iconSet={iconSet}
                SvgComponent={Svg}
                PathComponent={Path}
                icon="heart"
                size={30}
                style={{ margin: 50, color: '#f40' }}
            />
        </ScrollView>
    </SafeAreaView>;
};

export default ReactIcoMoon;

3. react-native-calendars日曆

import React from "react";
import {SafeAreaView, ScrollView} from "react-native";
import {Calendar, LocaleConfig} from 'react-native-calendars';

LocaleConfig['locales'][''] = {
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    dayNames: ['週一', '週二', '週三', '週四', '週五', '週六', '周天'],
    dayNamesShort: ['週一', '週二', '週三', '週四', '週五', '週六', '周天'],
    amDesignator: '上午',
    pmDesignator: '下午'
}
const ReactNativeCalendars = () => {
    const [selected, setSelected] = React.useState('');
    React.useEffect(() => {

    }, []);
    return <SafeAreaView>
        <ScrollView>
            <Calendar
                onDayPress={(day) => {
                    setSelected(day.dateString);
                }}
                style={{height: 350}}
                markedDates={{
                    [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
                }}
            />
        </ScrollView>
    </SafeAreaView>;
};

export default ReactNativeCalendars;