[译]React Native 中的响应式UI

2018-06-09 本文已影响87人 spongebobsun

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

React Native 中的响应式UI

1_AaAkJtBf2j0FExlYIJkZGw.gif

最近我发布了一个新的叫做React Native DO 的React Native快速上手框架。像是市面上其他的React Native App一样，它只能用在设备的竖屏模式下。很快，我就收到了反馈说要求添加横屏模式支持。

React Native让我们可以使用Web开发中的一些技巧和知识来开发App。然而在Web开发中，我们从来不会假设浏览器的窗口大小是定死的。但是在React Naitve中却恰恰相反。实际上，社区中大多数的第三方包都会假设App的窗口大小是不变的。甚至于一些专注于解决响应式布局的第三方库都会假设在app运行的过程中窗口的大小是不变的。为了解决这个问题，我创建了react-native-responsive-ui 这个库。

监听窗口的大小变化

在React Native中你并不用添加如react-native-orientation这样的第三方库来监听窗口大小的变化，你只需要用Dimensions.addEventListener()这个函数就可以。在下面的示例中，我们会在一个Component内去监听窗口大小的变化。App窗口大小的变化会被存在state里面，所以在每次窗口大小更新的时候Component都会被重新渲染一次。最后，在Component被卸载的时候我们要停止监听。

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

响应式的Component

当设备的方向发生变化，或者当前的App被分屏显示的时候，App窗口的大小就会发生变化。在Web开发中，响应式的设计是通过CSS中的声明来实现的。在React Native中，窗口的大小需要被加在Component的state当中。这样的实现并不是很优雅，并且会对App的性能造成一定的负面影响 - 每次窗口大小发生变化的时候，Component都会被重绘一次。但实际上这并不会带来坏的用户体验：当设备的方向发生变化的时候，由于重绘所带来的掉帧并不会被注意到。

react-native-responsive-ui这个包提供了一个叫作responsive的修饰器用于监听窗口大小的变化。在下面的这个例子里，我们用新的修饰器把之前的代码片段重构了一下。

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这个包还提供了一个条件渲染的组件。在下面的例子里，Logo这个Component只有在App窗口大小大于等于450dp并且是在竖屏模式下的时候才会被渲染。

// @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 这个模块会把若干media query合并在一起并且返回一个样式表。与StyleSheet这个模块不同的是，响应式的样式必须在Component渲染的过程中生成，并且Component必须在每一次窗口大小改变的时候重新渲染。这可以通过继承ResponsiveComponent这个类来实现。在下面这个例子里，我们会展示一些按钮。如果设备是处于横屏模式下，按钮会横向排列并且会拉伸到整个屏幕宽度。在竖屏模式下，按钮则会纵向排列。

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

冰山一角

希望前面几个代码片段会对你有所帮助。虽然他们只是React Native响应式布局的冰山一角。在Web开发的过程中，使用相对单位如%和em是适应任何屏幕大小的好办法。但是在RN中，我们只有一种单位可以使用，所以需要手动的计算元素的相对大小。

React中的样式表是一个被广泛讨论的话题，React Native更是有过之而无不及。对于常规的布局样式来说，就没有什么万灵药，更别提响应式布局了。不过现在已经出现了一些比较有意思的项目，比如Shoutem theme就是很值得一提的。他们的目标是把Component的样式和实现完全解耦。在给Component自定义样式这个需求日益增长的情况下，我觉得他们的实现还是很有前景的。持续关注这个项目看他们是不是会处理窗口大小的变化吧。

没了

就这些啦！希望这篇文章对你有用，同时也期待你的反馈。