设计迭代周期:可视调试控件

不管你在开发什么应用，快速调整 UI 总是非常痛苦的。如果工程师和设计师坐在一起调，整个处理过程会慢下来。

React Native 有一个 live reload 特性。这个特性使得 JavaScript 代码发生改变之后，界面会立刻自动刷新。这个特性可缩短设计迭代流程。

但如果一个组件在不同状态下表现得不一样时该怎么办？比如，有一个按钮，有默认样式，按下状态时的样式，正在加载时，加载完成时的状态。

为了避免每一次都在 app 中和控件交互，我们做了一个可视的调试控件 Playground：

/* from js/setup.js */
class Playground extends React.Component {
  constructor(props) {
    super(props);
    const content = [];
    const define = (name: string, render: Function) => {
      content.push(<Example key={name} render={render} />);
    };

    var AddToScheduleButton = require('./tabs/schedule/AddToScheduleButton');
    AddToScheduleButton.__cards__(define);
    this.state = {content};
  }

  render() {
    return (
      <View style=>
        {this.state.content}
      </View>
    );
  }
}

这个控件简单地创建了一个空的 view，这个 view 可以被真正的控件置换。比如当我们在一个 UI 组件中，把这个和一些定义绑定，以 AddToScheduleButton 为例说明：

/* from js/tabs/schedule/AddToScheduleButton.js */
module.exports.__cards__ = (define) => {
  let f;
  setInterval(() => f && f(), 1000);

  define('Inactive', (state = true, update) =>
    <AddToScheduleButton isAdded={state} onPress={() => update(!state)} />);

  define('Active', (state = false, update) =>
    <AddToScheduleButton isAdded={state} onPress={() => update(!state)} />);

  define('Animated', (state = false, update) => {
    f = () => update(!state);
    return <AddToScheduleButton isAdded={state} />;
  });
};

在 UI 预览工具中我们可以看到：

image

这个例子定义了按钮正常态和按压态。为了预览过渡动画，还定义了在两个状态间循环往复的动画状态。
这让工程师和设计师在一起调整基础组件的视觉风格时变得相当快。
<Playground> 可以在任何 React Native app 中复用，如果你想使用它，只需要在 setup() 函数中加载 <Playground> 即可：

/* from js/setup.js */
render() {
  ...
  return (
    <Provider store={this.state.store}>
      <F8App />
    </Provider>
  );
}

变为：

/* in js/setup.js */
render() {
  ...
  return (
    <Provider store={this.state.store}>
      <Playground />
    </Provider>
  );
}