rn-hooks

v1.1.0

Published

3 years ago

React-Native common hooks

Downloads

0High
0Medium
0Low

anthinkingcoder

react react-native hooks

React Native Hooks

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

Note: React Native >= 0.59.0

Installation

yarn add rn-hooks

API

React

React Native

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();

返回值

| 参数名 | 类型 | 描述 | | :------- | :--------- | :--------- | | state | boolean | - | | setTrue | Function | - | | setFalse | Function | - | | toggle | Function | 切换布尔值 |

`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]);

参数

返回值

| 参数名 | 类型 | 描述 | | :------ | :-------------------------------------- | :----------- | | loading | boolean | - | | run | (showLoading?: boolean) => Promise<T> | 手动执行函数 | | error | Error or string | 错误信息 | | setData | React.Dispatch<T> | 手动设置数据 |

`useEventListener`

简化事件监听与销毁。

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

参数

| 参数名 | 类型 | 描述 | 默认值 | | :-------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | | emitter | Emitter | 包含下列监听和销毁方法的都可以[addListener, removeListener],[addEventListener, removeEventListener],[addListener, remove],[subscribe, unsubscribe] | | eventName | string | 事件名 | | handler | Function | | 事件回调 |

`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>
    );
};

参数

| 参数名 | 类型 | 描述 | 默认值 | | :------ | :--------- | :------------------------------------------ | :----- | | handler | Function | 执行回调 | | timeout | number | 时间 | | manual | boolean | 是否手动执行，true需要手动调用start执行 | false |

返回值

| 参数名 | 类型 | 描述 | 默认值 | | :------- | :--------------------- | :-------------------------------- | :----- | | complete | boolean or undefined | 完成标示, undefined表示还未执行 | false | | start | Function | 手动执行函数,可重复执行 | - | | clear | Function | 手动清除 | - |

`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>
    );
};

参数

返回值

| 参数名 | 类型 | 描述 | 默认值 | | :----- | :--------- | :---------------------- | :----- | | start | Function | 手动执行函数,可重复执行 | - | | clear | Function | 手动清除 | - |

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', '小米');
};

返回值

| 参数名 | 类型 | 描述 | 默认值 | | :----- | :----------------------------------------------- | :------------------------------------------------------------------------------------ | :----- | | state | - | 同setState | false | | clear | (state: State<S>, immediate?: boolean) => void | true会立即设置 state，不会等待缓存设置成功。false会等待缓存设置成功后才设置 state | - |

`useAnimation`

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

useAnimation(config: AnimationConfig): ReturnValue

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

参数

| 参数名 | 类型 | 描述 | 默认值 | | :----------- | :------------------------------- | :-------------------------------------------- | :----- | | initialValue | number or {x:number, y:number} | | | type | timing、spring、decay | 动画类型 | | onEnd | Animated.EndCallback | 结束回调 | - | | manual | boolean | 是否手动执行，true需要手动调用restart执行 | false |

返回值

| 参数名 | 类型 | 描述 | 默认值 | | :------ | :----------------------------------- | :----------- | :----- | | value | Animated.Value or Animated.ValueXY | 同Animated | | restart | Function | 重新执行 | | restore | Function | 回到初始状态 | - |

`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();
};

返回值

| 参数名 | 类型 | 描述 | 默认值 | | :------ | :----------------------------------- | :----------- | :----- | | shown | boolean | 键盘是否打开 | | height | number | 键盘高度 | | coordinates | Coordinates | 键盘位置 | - | | coordinates.start | ScreenReact | 键盘起点 | - | | coordinates.end | ScreenReact | 键盘终点 | - |

`useOrientation`

设备横竖屏信息

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

React Native Hooks

Installation

API

React

useUpdateEffect

useEffectOnce

useMount

useUnMount

useForceUpdate

useBoolean

返回值

useAsync

参数

返回值

useEventListener

参数

useCurrentValue

useTimeout

参数

返回值

useInterval

参数

返回值

React Native

useNativeEventListener

useAsyncStorageState

返回值

useAnimation

参数

返回值

useNavigationFocus

useNavigationFocusEffect

useDimensions

useOrientation

useAppState

useInteractionState

useKeyboard

返回值

useOrientation

`useUpdateEffect`

`useEffectOnce`

`useMount`

`useUnMount`

`useForceUpdate`

`useBoolean`

`useAsync`

`useEventListener`

`useCurrentValue`

`useTimeout`

`useInterval`

`useNativeEventListener`

`useAsyncStorageState`

`useAnimation`

`useNavigationFocus`

`useNavigationFocusEffect`

`useDimensions`

`useOrientation`

`useAppState`

`useInteractionState`

`useKeyboard`

`useOrientation`