原文鏈接（Original Post）Responsive UIs in React Native

原作者 William Candillon

React Native 中的響應(yīng)式UI

1_AaAkJtBf2j0FExlYIJkZGw.gif

最近我發(fā)布了一個(gè)新的叫做React Native DO 的React Native快速上手框架。像是市面上其他的React Native App一樣戈稿，它只能用在設(shè)備的豎屏模式下。很快，我就收到了反饋說要求添加橫屏模式支持吱型。

React Native讓我們可以使用Web開發(fā)中的一些技巧和知識(shí)來開發(fā)App木西。然而在Web開發(fā)中，我們從來不會(huì)假設(shè)瀏覽器的窗口大小是定死的颊艳。但是在React Naitve中卻恰恰相反投队。實(shí)際上枫疆，社區(qū)中大多數(shù)的第三方包都會(huì)假設(shè)App的窗口大小是不變的。甚至于一些專注于解決響應(yīng)式布局的第三方庫都會(huì)假設(shè)在app運(yùn)行的過程中窗口的大小是不變的敷鸦。為了解決這個(gè)問題息楔，我創(chuàng)建了react-native-responsive-ui 這個(gè)庫。

監(jiān)聽窗口的大小變化

在React Native中你并不用添加如react-native-orientation這樣的第三方庫來監(jiān)聽窗口大小的變化扒披，你只需要用Dimensions.addEventListener()這個(gè)函數(shù)就可以钞螟。在下面的示例中，我們會(huì)在一個(gè)Component內(nèi)去監(jiān)聽窗口大小的變化谎碍。App窗口大小的變化會(huì)被存在state里面鳞滨，所以在每次窗口大小更新的時(shí)候Component都會(huì)被重新渲染一次。最后蟆淀，在Component被卸載的時(shí)候我們要停止監(jiān)聽拯啦。

import {Component} from "react";
import {Dimensions} from "react-native";

export default class LogDimensionChanges extends Component {
    state = Dimensions.get("window");
    handler = dims => this.setState(dims);

    componentWillMount() {
        Dimensions.addEventListener("change", this.handler);
    }

    componentWillUnmount() {
      // Important to stop updating state after unmount
      Dimensions.removeEventListener("change", this.handler);
    }

    render() {
        const {width, height} = this.state.window;
        const mode = height > width ? "portrait" : "landscape";
        console.log(`New dimensions ${width}x${height} (${mode})`);
        return null;
    }
}

響應(yīng)式的Component

當(dāng)設(shè)備的方向發(fā)生變化，或者當(dāng)前的App被分屏顯示的時(shí)候熔任，App窗口的大小就會(huì)發(fā)生變化褒链。在Web開發(fā)中，響應(yīng)式的設(shè)計(jì)是通過CSS中的聲明來實(shí)現(xiàn)的疑苔。在React Native中甫匹，窗口的大小需要被加在Component的state當(dāng)中。這樣的實(shí)現(xiàn)并不是很優(yōu)雅惦费，并且會(huì)對(duì)App的性能造成一定的負(fù)面影響 - 每次窗口大小發(fā)生變化的時(shí)候兵迅，Component都會(huì)被重繪一次。但實(shí)際上這并不會(huì)帶來壞的用戶體驗(yàn)：當(dāng)設(shè)備的方向發(fā)生變化的時(shí)候薪贫，由于重繪所帶來的掉幀并不會(huì)被注意到恍箭。

react-native-responsive-ui這個(gè)包提供了一個(gè)叫作responsive的修飾器用于監(jiān)聽窗口大小的變化。在下面的這個(gè)例子里瞧省，我們用新的修飾器把之前的代碼片段重構(gòu)了一下扯夭。

import {Component} from "react";
import {responsive} from "react-native-responsive-ui";

@responsive
export default class Debug extends Component {
    render() {
        const {width, height} = this.props.window;
        const mode = height > width ? "portrait" : "landscape";
        console.log(`New dimensions ${width}x${height} (${mode})`);
        return null;
    }
}

Media Queries

react-native-responsive-ui這個(gè)包還提供了一個(gè)條件渲染的組件。在下面的例子里鞍匾，Logo這個(gè)Component只有在App窗口大小大于等于450dp并且是在豎屏模式下的時(shí)候才會(huì)被渲染交洗。

// @flow
import React, {Component} from "react";
import {View} from "react-native";
import {MediaQuery} from "react-native-responsive-ui";

export default class Login extends Component {
    render(): React$Element<*> {
        return <MediaQuery minHeight={450} orientation="portrait">
            <Logo />
        </MediaQuery>;
    }
}

StyleSheets

ResponsiveStyleSheet 這個(gè)模塊會(huì)把若干media query合并在一起并且返回一個(gè)樣式表。與StyleSheet這個(gè)模塊不同的是橡淑，響應(yīng)式的樣式必須在Component渲染的過程中生成构拳，并且Component必須在每一次窗口大小改變的時(shí)候重新渲染。這可以通過繼承ResponsiveComponent這個(gè)類來實(shí)現(xiàn)。在下面這個(gè)例子里隐圾，我們會(huì)展示一些按鈕。如果設(shè)備是處于橫屏模式下掰茶，按鈕會(huì)橫向排列并且會(huì)拉伸到整個(gè)屏幕寬度暇藏。在豎屏模式下，按鈕則會(huì)縱向排列濒蒋。

import React from "react";
import {ResponsiveComponent, ResponsiveStyleSheet} from "react-native-responsive-ui";

export default class Buttons extends ResponsiveComponent {
    render() {
        const {style} = this;
        return <View style={style.btns}>
            <Button label="Login" primary style={style.btn} />
            <Button label="Sign Up" style={style.btn} />
        </View>;
    }
    
    get style() {
        return ResponsiveStyleSheet.select([{
            query: { orientation: "landscape" },
            style: {
                btns: {
                    flexDirection: "row"
                },
                btn: {
                    flex: 1
                }
            }
        }, {
            query: { orientation: "portrait" },
            style: {
                btns: {
                    alignSelf: "stretch"
                },
                btn: {
                    flex: 0
                }
            }
        }]);
    }
}

冰山一角

希望前面幾個(gè)代碼片段會(huì)對(duì)你有所幫助盐碱。雖然他們只是React Native響應(yīng)式布局的冰山一角。在Web開發(fā)的過程中沪伙，使用相對(duì)單位如%和em是適應(yīng)任何屏幕大小的好辦法瓮顽。但是在RN中，我們只有一種單位可以使用围橡，所以需要手動(dòng)的計(jì)算元素的相對(duì)大小暖混。

React中的樣式表是一個(gè)被廣泛討論的話題，React Native更是有過之而無不及翁授。對(duì)于常規(guī)的布局樣式來說拣播，就沒有什么萬靈藥，更別提響應(yīng)式布局了收擦。不過現(xiàn)在已經(jīng)出現(xiàn)了一些比較有意思的項(xiàng)目贮配，比如Shoutem theme就是很值得一提的。 他們的目標(biāo)是把Component的樣式和實(shí)現(xiàn)完全解耦塞赂。在給Component自定義樣式這個(gè)需求日益增長的情況下泪勒，我覺得他們的實(shí)現(xiàn)還是很有前景的。持續(xù)關(guān)注這個(gè)項(xiàng)目看他們是不是會(huì)處理窗口大小的變化吧宴猾。

沒了

就這些啦圆存！希望這篇文章對(duì)你有用，同時(shí)也期待你的反饋仇哆。