react-native-style-adaptive

    1.1.7 • Public • Published

    react-native-style-adaptive

    Chinese | English

    A tool library that helps you quickly adapt to different device styles for IOS and Android.

    Some convenient adaptation tool methods have been implemented. And compatibility processing of the RN low version SafeAreaView component

    Installing

    npm install react-native-style-adaptive --save

    API

    initSize(size: Number)

    Set the design size

    Parameters

    size - Design draft size to be set (without units), default 750px size

    Example

    import { initSize } from 'react-native-style-adaptive'
     
    // Set the design draft for iphone5
    initSize(640)
     

    returns - Return? The size of the design draft after setting is generally useless.


    px2dp(px: Number)

    Convert px to dp

    Parameters

    px - The px value to be calculated (without units)

    Example

    import { px2dp } from 'react-native-style-adaptive'
     
    // Pass in the current ?px value and return the calculated dp value
    console.log(px2dp(750)) //=> 375
     

    returns - Returns the value of the calculated dp


    dp2px(dp: Number)

    Convert dp to px

    Parameters

    dp - The dp value to be calculated (without units)

    Example

    import { dp2px } from 'react-native-style-adaptive'
     
    // Pass in the current ?dp value and return the calculated px value
    console.log(dp2px(375)) //=> 750
     

    returns - Returns the value of px after calculation


    pixelRatio

    Read only: Get the current device pixel density

    Example

     
    import { pixelRatio } from 'react-native-style-adaptive'
     
    // Take iphone6 as an example
    console.log(pixelRatio) //=> 2
     

    returns - Returns the current device pixel density value


    originalWidth

    Read only: Get the width of the current device? in portrait mode, regardless of whether the screen is rotated or not

    Example

    import { originalWidth } from 'react-native-style-adaptive'
     
    // Take iphone6 as an example
    console.log(originalWidth) //=> 375
     

    returns - Returns the width of the current device in portrait mode, regardless of whether the screen is rotated or not


    originalHeight

    Read only: Get the height of the current device? in portrait mode, regardless of whether the screen is rotated or not

    Example

    import { originalHeight } from 'react-native-style-adaptive'
     
    // Take iphone6 as an example
    console.log(originalHeight) //=> 667
     

    returns - Returns the height of the current device in portrait mode, regardless of whether the screen is rotated or not


    deviceWidth()

    Get the current device width, related to whether the screen is rotated

    Example

    import { deviceWidth } from 'react-native-style-adaptive'
     
    // Take iphone6 as an example
    console.log(deviceWidth()) //=> 375
     

    returns - Returns the current width value of the device, whether relating to rotation of the screen, the return value of the landscape? Height of the apparatus


    deviceHeight()

    Get the current device height, related to whether the screen is rotated

    Example

    import { deviceHeight } from 'react-native-style-adaptive'
     
    // Take iphone6 as an example
    console.log(deviceHeight()) //=> 667
     

    returns - Returns the current equipment, whether relating to rotation of the screen, the return value of the landscape? Device width


    isIos

    Read only: Determine if it is an Ios device

    Example

    import { isIos } from 'react-native-style-adaptive'
     
    // Assume that the current device is an iphone device.
    console.log(isIos) //=> true
     

    returns - Return the judgment result, the Ios device returns true, the other returns false


    isAndroid

    Read only: Determine if it is an Android device

    Example

    import { isAndroid } from 'react-native-style-adaptive'
     
    // Assume that the current device is an iphone device.
    console.log(isAndroid) //=> false
     

    returns - Return the judgment result, the Android device returns true, the other returns false


    isPad

    Read only: Determine if it is an iPad device

    Example

    import { isPad } from 'react-native-style-adaptive'
     
    // Assume that the current device is an iphone6 device.
    console.log(isPad) //=> false
     

    returns - Return the judgment result, the iPad device returns true, the other returns false


    isTVOS

    Read only: Determine if it is an TVOS device

    Example

    import { isTVOS } from 'react-native-style-adaptive'
     
    // Assume that the current device is an iphone6 device.
    console.log(isTVOS) //=> false
     

    returns - Return the judgment result, the TVOS device returns true, the other returns false


    Version

    Read only: Detect the version of the currently running Android platform

    Example

    import { Version } from 'react-native-style-adaptive'
     
    console.log(Version) //=> 21
     

    returns - Returns the version of the currently running Android platform


    isIPhoneX

    Read only: Determine if it is an iphonex device

    Example

    import { isIPhoneX } from 'react-native-style-adaptive'
     
    // Assume that the current device is an iphone6 device.
    console.log(isIPhoneX) //=> false
     

    returns - Return the judgment result, the iphonex device returns true, the other returns false


    ifIPhoneX(iphoneXOptions, [iosOptions], [androidOptions])

    Customize styles for ios iphonex android, accept any type of parameters, including functions

    Parameters

    iphoneXOptions - When the device is iphonex, the parameter can be a function type. iosOptions - When the device is not the style of iphonex's ʻiosdevice, the parameter can be a function type androidOptions - When the device is in the style ofandroid`, the parameter can be a function type.

    Example

    • Object formal parameter
    import { StyleSheet } from 'react-native'
    import { ifIPhoneX } from 'react-native-style-adaptive'
     
    ...
     
    const styles = StyleSheet.create({
        container: {
            fontSize: 14
        },
        ...ifIPhoneX({
            backgroundColor: 'violet'
        }, {
            backgroundColor: 'brown'
        }, {
            backgroundColor: 'pink'
        })
    })
     
    • Function formal parameter
    import { StyleSheet } from 'react-native'
    import { ifIPhoneX } from 'react-native-style-adaptive'
     
    ...
     
    const styles = StyleSheet.create({
        container: {
            fontSize: 14
        },
        ...ifIPhoneX(() => {
            return { backgroundColor: 'violet' }
        }, () => {
            if (Math.random() >= 0.5) {
                return { backgroundColor: 'brown' }
            } else {
                return { backgroundColor: 'red' }
            }
        })
    })
     

    returns - Returns the result of the hit, the object form returns Object, and the function form returns the value after return


    isHorizontal()

    Determine whether it is horizontal or not

    Example

    import { isHorizontal } from 'react-native-style-adaptive'
     
    // Assume that the current device orientation is vertical
    console.log(isIPhoneX()) //=> false
     

    returns - Returns the result of the judgment, the device returns true when the screen is horizontal, and the other returns false


    ifHorizontal(horizontalOptions, [verticalOptions])

    Customize styles based on device screen orientation, accepting any type of parameters, including functions

    Parameters

    horizontalOptions - When the device is in landscape mode, the parameter can be a function type. verticalOptions - When the device is in portrait mode, the parameter can be a function type.

    Example

    • Object formal parameter
    import { StyleSheet } from 'react-native'
    import { ifHorizontal } from 'react-native-style-adaptive'
     
    ...
     
    const styles = StyleSheet.create({
        container: {
            fontSize: 14
        },
        ...ifHorizontal({
            backgroundColor: 'blue'
        }, {
            backgroundColor: 'violet'
        })
    })
     
    • Function formal parameter
    import { StyleSheet } from 'react-native'
    import { ifHorizontal } from 'react-native-style-adaptive'
     
    ...
     
    const styles = StyleSheet.create({
        container: {
            fontSize: 14
        },
        ...ifHorizontal(() => {
            return { backgroundColor: 'violet' }
        }, () => {
            if (Math.random() >= 0.5) {
                return { backgroundColor: 'brown' }
            } else {
                return { backgroundColor: 'red' }
            }
        })
    })
     

    returns - Returns the result of the hit, the object form returns Object, and the function form returns the value after return


    getStatusBarHeight([safe: boolean])

    Get the current device statusBar height

    Parameters

    safe - Whether to get the safe height, the default is not the safe height (false)

    Example

    import { StyleSheet } from 'react-native'
    import { getStatusBarHeight } from 'react-native-style-adaptive'
     
    const styles = StyleSheet.create({
        header:{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            padding:10,
            height: 60,
            backgroundColor: 'transparent',
            paddingTop: getStatusBarHeight()
        }
    })
     

    returns - Return to statusBar height: iphonex security height is 44 in horizontal screen state, unsafe height is 30, vertical screen status iphonex returns statusBar height is 0, other ios devices are 20, android device? Returns the current device statusBar height


    getBottomSpace()

    Get the safe height at the bottom of the device

    Example

    import { StyleSheet } from 'react-native'
    import { getBottomSpace } from 'react-native-style-adaptive'
     
    const styles = StyleSheet.create({
        footer: {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            padding:10,
            height: 40,
            backgroundColor: 'transparent',
            marginBottom: getBottomSpace()
        },
    })
     

    returns - The bottom is highly safe, the horizontal screen iphonex device returns 34, the vertical iphonex device returns 21, and the other devices are 0


    SafeAreaView

    Compatible component SafeAreaView, high version uses react-native default component, low version uses compatible version

    Example

    import React, { Component } from 'react'
    import { SafeAreaView } from 'react-native-style-adaptive'
     
    export default class MyApp extends Component {
      render() {
        return (
          <SafeAreaView
            style={ { flex: 1, backgroundColor: 'blue'} }
          >
            ... //=> Page code
          </SafeAreaView>
        )
      }
    }
     

    reaact-native 0.44.3 validity check

    Licence

    MIT

    Install

    npm i react-native-style-adaptive

    DownloadsWeekly Downloads

    52

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    28.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • aaronshen