Other

元件的位置和長寬(元件大小)

<View style={styles.row}
    onLayout={(event) => {
        var {x, y, width, height} = event.nativeEvent.layout;
    }
}/>

字體大小不被系統字體大小影響(just for iOS)

Text.defaultProps.allowFontScaling = false;

獲取螢幕寬高(Dimensions)

RN官網

import { Dimensions, } from 'react-native'
    export var windowH = Dimensions.get('window').height;
    export var windowW = Dimensions.get('window').width;
or
    var {height, width} = Dimensions.get('window')

PixelRatio(像素比)(螢幕密度!?)

參考 RN官網

平台(Android|iOS)(Platform Specific Code)

(Android version) (iOS version) RN官網

監聽鍵盤(Show、Hide)

參考 Avoiding the Keyboard in React Native

import { Keyboard } from 'react-native'

...

constructor() {
    super();
    this.state = {
        //change money's input position
        isKeyboardShow: true,
        //for ios's softkeyboard
        keyboardHeight: 0,
    }
}

componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => this.keyboardDidShow(e));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => this.keyboardDidHide());
}

componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

keyboardDidShow(e) {
    this.setState({
        isKeyboardShow: true,
        keyboardHeight: e.endCoordinates.height, //測量鍵盤高度
    });
}

keyboardDidHide() {
    this.setState({
        isKeyboardShow: false,
        keyboardHeight: 0,
    });
}

...

Last updated