ReactNative第三方UI庫

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;

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;

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;

react-native-drawer抽屜

<Drawer
     type="displace"
     ref={drawerRef}
     acceptDoubleTap={true}
     captureGestures={false}
     tweenDuration={100}
     panThreshold={0.08}
     onOpen={() => setOpen(true)}
     onClose={() => setOpen(false)}
     openDrawerOffset={() => 90}
     panOpenMask={0.2}
     open={open}
     negotiatePan={true}
     content={<ScrollView style={styles.container}>
         <ReactNativeCalendars onSelect={(date) => {
             drawerRef.current!.close();
             setDate(date);
         }}/>
     </ScrollView>}
     styles={{drawer: styles.drawer, main: styles.main}}
     tweenHandler={(ratio) => ({
         main: {opacity: (2 - ratio) / 2}
     })}
 >
     <ScrollView style={[styles.container, {backgroundColor: '#FFF',}]}>
         <Text onPress={() => drawerRef.current!.open()}>{date || '選擇日期'}</Text>
     </ScrollView>
</Drawer>

react-native-textinput-effects漂亮的輸入框

import React from "react";
import {SafeAreaView, ScrollView} from "react-native";
import {Fumi} from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';


const ReactNativeTextInputEffects = () => {
    const [value, setValue] = React.useState('');
    React.useEffect(() => {

    }, []);
    return <SafeAreaView>
        <ScrollView>
            <Fumi
                style={{backgroundColor: '#f9f5ed'}}
                label="賬號"
                iconClass={FontAwesomeIcon}
                iconName="university"
                iconColor="#f95a25"
                iconSize={20}
                iconWidth={40}
                inputPadding={16}
                onChangeText={setValue}
                value={value}
                keyboardType="number-pad"
                blurOnSubmit={true}
            />
        </ScrollView>
    </SafeAreaView>;
};

export default ReactNativeTextInputEffects;