rn-hooks v1.1.0

React Native Hooks

提供一些基础的 Hook，以及 React Native 独有的 Hook。

Note: React Native >= 0.59.0

Installation

yarn add rn-hooks

API

React

• useUpdateEffect
• useEffectOnce
• useMount
• useUnMount
• useForceUpdate
• useBoolean
• useAsync
• useEventListener
• useCurrentValue
• useTimeout
• useInterval

React Native

• useNativeEventListener
• useAnimation
• useNavigationFocus
• useNavigationFocusEffect
• useAsyncStorageState
• useDimensions
• useAppState
• useInteractionState
• useKeyboard
• useOrientation

React

useUpdateEffect

与 useEffect类似，唯一区别是 useUpdateEffect 在 mount阶段不会执行。

import { useUpdateEffect } from 'rn-hooks';

useUpdateEffect(() => {
    // do something
}, []);

useEffectOnce

只会执行一次useEffect

import { useEffectOnce } from 'rn-hooks';

//exec once
useEffectOnce(() => {}, []);

useMount

模拟class组件的componentDidMount事件。

import { useMount } from 'rn-hooks';

useMount(() => {
    // todo
});

useUnMount

模拟class组件的componentWillUnMount事件。

import { useUnMount } from 'rn-hooks';

useUnMount(() => {
    // todo
});

useForceUpdate

模拟class组件的forceUpdate api。

import { useForceUpdate } from 'rn-hooks';
const update = useForceUpdate();
// update()

useBoolean

import { useBoolean } from 'rn-hooks';

const { state, setTrue, setFalse, toggle } = useBoolean();

返回值

useAsync

简化异步操作，包含 loading 处理、取消等。

useAsync<T>( fn: (...args: any[]) => Promise<T>, deps: DependencyList, options?: Options<T>): ReturnValue<T>

import { useAsync } from 'rn-hooks'
   const {
        loading,
        data: votes = [],
        setData: setVotes,
    run } = useAsync<VoteInfo[]>(getVotes, [schoolUid, classUid, updateTag]);

参数

返回值

useEventListener

简化事件监听与销毁。

useEventListener<T extends Emitter>( emitter: T, eventName: string, handler: Function ): void

参数

useCurrentValue

始终使用最新的值。

useCurrentValue<Text>(initialValue: T): MutableRefObject<Text>

import { useCurrentValue } from 'rn-hooks';
(data: Data) => {
    const ref = useCurrentValue(data);
    // ref.current === data
};

useTimeout

简化setTimeout操作，组件卸载后会及时清理掉未执行的定时器。

useTimeout(handler: Function, timeout: number, manual?: boolean): ReturnValue

import { useTimeout } from 'rn-hooks';
(data: Data) => {
    const { complete, start, clear } = useTimeout(() => {
        // todo
    }, 1000);

    return (
        <View>
            <Text>{complete}</Text>
            <TouchableWithoutFeedback onPress={start}>
                <Text>重新执行</Text>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={clear}>
                <Text>取消</Text>
            </TouchableWithoutFeedback>
        </View>
    );
};

参数

返回值

useInterval

简化setInterval操作，组件卸载后会及时清理掉定时器。

useInterval(handler: Function, timeout: number, manual?: boolean): ReturnValue

import { useInterval } from 'rn-hooks';
(data: Data) => {
    const { start, clear } = useInterval(() => {
        // todo
    }, 1000);

    return (
        <View>
            <Text>{complete}</Text>
            <TouchableWithoutFeedback onPress={start}>
                <Text>重新执行</Text>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={clear}>
                <Text>取消</Text>
            </TouchableWithoutFeedback>
        </View>
    );
};

参数

返回值

React Native

useNativeEventListener

React Native DeviceEventEmitter 事件监听。

import { useNativeEventListener } from 'rn-hooks';
(props: Props) => {
    // 刷卡事件监听
    useNativeEventListener('cardId', () => {
        // todo
    });
};

useAsyncStorageState

增强useState，提供异步缓存。

useAsyncStorageState<T extends AsyncStorageStatic, S>( storage: T, key: string, initialState?: State<S> ): [S | undefined, (state: State<S> | undefined, immediate?: boolean) => void]

import { useAsyncStorageState } from 'rn-hooks';
import AsyncStorage from '@react-native-community/async-storage';
(props: Props) => {
    const [state, setState] = useAsyncStorageState(AsyncStorage, 'username', '小米');
};

返回值

useAnimation

简化动画，支持timing、spring、decay动画。支持二维动画。

useAnimation(config: AnimationConfig): ReturnValue

(props: Props) => {
    const {
        value: width,
        restart
    } = useAnimation({
        manual: false,
        initialValue: 0,
        type: 'timing',
        toValue: 100,
        2000
    })
}

参数

返回值

useNavigationFocus

导航失焦获焦点状态。

Note: React-Navigation < 5

useNavigationFocus(navigation: NavigationScreenProp<NavigationState>): boolean

import { useNavigationFocus } from 'rn-hooks';
({ navigation }: Props) => {
    const isFocus = useNavigationFocus(navigation);
};

useNavigationFocusEffect

与 useEffect类似，监听导航 didFocus，didBlur 事件。

Note: React-Navigation < 5

useNavigationFocusEffect(navigation: NavigationScreenProp<NavigationState>, effect: EffectCallback)

import { useNavigationFocusEffect } from 'rn-hooks';
({ navigation }: Props) => {
    useNavigationFocusEffect(navigation, () => {
        // didFocus
        console.log('useNavigationFocus');
        return () => {
            // didBlur
            console.log('useNavigationBlur');
        };
    });
};

useDimensions

设备尺寸信息 useDimensions():{window: ScaledSize;screen: ScaledSize;}

import { useDimensions } from 'rn-hooks';
({}: Props) => {
    const { window, screen } = useDimensions();
    //screen.width,screen.height
};

useOrientation

横竖屏判断 useOrientation(): {isPortrait: boolean; isLandscape: boolean;}

import { useOrientation } from 'rn-hooks';
({}: Props) => {
    const { isPortrait, isLandscape } = useOrientation();
};

useAppState

App 当前状态

useAppState(): AppStateStatus

import { useAppState } from 'rn-hooks';
({}: Props) => {
    const appState = useAppState(); //'active' | 'background' | 'inactive'
};

useInteractionState

是否可交互状态

useInteractionState(): boolean

import { useInteractionState } from 'rn-hooks';
({}: Props) => {
    const complete = useInteractionState();
};

useKeyboard

获取键盘一些信息

useKeyboard():ReturnValue

import { useKeyboard } from 'rn-hooks';
({}: Props) => {
    const { shown, height } = useKeyboard();
};

返回值

useOrientation

设备横竖屏信息

useOrientation(): {isPortrait: boolean;isLandscape: boolean;}

import { useOrientation } from 'rn-hooks';
({}: Props) => {
    const { isPortrait, isLandscape } = useOrientation();
};