原文链接（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自定义样式这个需求日益增长的情况下，我觉得他们的实现还是很有前景的。持续关注这个项目看他们是不是会处理窗口大小的变化吧。
没了
就这些啦！希望这篇文章对你有用，同时也期待你的反馈。
网友评论