构建 F8 2016 App 第二部分:设计跨平台App

RosGehlert 3年前
   <p>上一篇:<a href="http://www.open-open.com/lib/view/open1461203904422.html">构建 F8 2016 App 第一部分:开发计划</a></p>    <p>这是为了介绍 React Native 和它的开源生态的一个系列教程,我们将以构建 F8 2016 开发者大会官方应用的 iOS 和 Android 版为主题。</p>    <p>React Native 的一大优势是:可以只用一种语法编写分别运行在 iOS 和 Android 平台上的程序,且可重用部分应用逻辑。</p>    <p>然而,与“一次编写,到处运行”的理念不同的是,React Native 的哲学是“一次学习,到处编写”。如此一来,即使用 React Native 编写不同平台的程序,也可以尽可能贴合每个平台的特性。</p>    <p>从 UI 的角度来看,每个平台都有自己独特的视觉风格、UI 范例甚或是技术层面的功能,那我们设计出一个统一的 UI 基础组件,然后再按照各平台特性进行调整岂不乐乎?</p>    <h2>准备工作</h2>    <p>在后续的所有教程中,我们会仔细解读 App 的源代码,请克隆一份<a href="/misc/goto?guid=4959670935995486083">源代码</a>到本地可访问的路径,然后根据<a href="/misc/goto?guid=4959671498181830215">配置说明</a>在本地运行 App。在本章的教程中,你只需要阅读相关源代码。</p>    <p>React Native 思维模式</p>    <p>在你写任何 React 代码之前,请认真思考这个至关重要的问题:<strong>如何才能尽可能多地重用代码?</strong></p>    <p>React Native 的理念是针对每个平台分而治之,代码重用的做法看起来与之相违背,好像我们就应该为每个平台定制其专属的视觉组件一样,但实际上我们仍需努力让每个平台上的代码尽可能多地统一。</p>    <p>构建一套 React Native 应用视觉组件的关键点在于如何最好地实现平台抽象。开发人员和设计师可以列出应用中需要重用的组件,例如按钮、容器、列表行,头部等等,只有在必要的时候才单独为每个平台设计特定的组件。</p>    <p>当然,有一些组件相对于其它组件而言更为复杂,我们先一起来看看 F8 应用中不同的组件有什么区别。</p>    <p>各种各样的小组件</p>    <p>请看 F8 应用的示例图:</p>    <p><a href="/misc/goto?guid=4959671498266053242"><img alt="iOS and Android Segmented Controls Comparison" src="https://simg.open-open.com/show/8d2c21a01352a389cb80e3bf1161569e.png"></a></p>    <p>在 iOS 版本中,我们用 iOS 系统中很常见的圆角边框风格来切分 Tab 控制;在 Android 版本中,我们用下划线的风格来标示这个组件。而这两个控制组件的功能其实完全相同。</p>    <p>所以,即使两者样式稍有不同,但是实现的功能相同,所以我们可以用同一套代码抽象此处的逻辑,从而可以尽可能多地重用代码。</p>    <p>我们针对像这样的小组件做了很多跨平台重用逻辑代码的案例,比如一个简单的文本按钮,在每个平台上我们都会设计不同的 hover 和 active 状态的样式,但是除开这些视觉上的细微的差异外,逻辑功能完全相同。所以我们总结了一个抽象 React Native 视觉组件的最佳实践方法:设计一套相同的逻辑代码,然后在控制语句中编写其余需要差异化的部分。</p>    <p>以下是这个组件的示例代码(来自 <code><F8SegmentedControl></code>):</p>    <pre>  <code class="language-javascript">/* from js/common/F8SegmentedControl.js */  class Segment extends React.Component {    props: {      value: string;      isSelected: boolean;      selectionColor: string;      onPress: () => void;    };    render() {      var selectedButtonStyle;      if (this.props.isSelected) {        selectedButtonStyle = { borderColor: this.props.selectionColor };      }      var deselectedLabelStyle;      if (!this.props.isSelected && Platform.OS === 'android') {        deselectedLabelStyle = styles.deselectedLabel;      }      var title = this.props.value && this.props.value.toUpperCase();        var accessibilityTraits = ['button'];      if (this.props.isSelected) {        accessibilityTraits.push('selected');      }        return (        <TouchableOpacity          accessibilityTraits={accessibilityTraits}          activeOpacity={0.8}          onPress={this.props.onPress}          style={[styles.button, selectedButtonStyle]}>          <Text style={[styles.label, deselectedLabelStyle]}>            {title}          </Text>        </TouchableOpacity>      );    }  }</code></pre>    <p>在这段代码中,我们为每一种平台分别应用了不同的样式(用到了 React Native 的 <a href="/misc/goto?guid=4959671498349730045">Platform 模块</a>)。各平台中的 Tab 按钮都应用了相同的通用样式,同时也根据各平台特性定制了独占样式(同样出自 <code><F8SegmentedControl></code>):</p>    <pre>  <code class="language-javascript">/* from js/common/F8SegmentedControl.js */  var styles = F8StyleSheet.create({    container: {      flexDirection: 'row',      backgroundColor: 'transparent',      ios: {        paddingBottom: 6,        justifyContent: 'center',        alignItems: 'center',      },      android: {        paddingLeft: 60,      },    },    button: {      borderColor: 'transparent',      alignItems: 'center',      justifyContent: 'center',      backgroundColor: 'transparent',      ios: {        height: HEIGHT,        paddingHorizontal: 20,        borderRadius: HEIGHT / 2,        borderWidth: 1,      },      android: {        paddingBottom: 6,        paddingHorizontal: 10,        borderBottomWidth: 3,        marginRight: 10,      },    },    label: {      letterSpacing: 1,      fontSize: 12,      color: 'white',    },    deselectedLabel: {      color: 'rgba(255, 255, 255, 0.7)',    },  });</code></pre>    <p>在这段代码中我们使用了一个改编自 <a href="/misc/goto?guid=4959671498430134419">React Native <code>StyleSheet</code> API</a> 的函数 F8StyleSheet,它可以针对各平台分别进行样式转换操作:</p>    <pre>  <code class="language-javascript">export function create(styles: Object): {[name: string]: number} {    const platformStyles = {};    Object.keys(styles).forEach((name) => {      let {ios, android, ...style} = {...styles[name]};      if (ios && Platform.OS === 'ios') {        style = {...style, ...ios};      }      if (android && Platform.OS === 'android') {        style = {...style, ...android};      }      platformStyles[name] = style;    });    return StyleSheet.create(platformStyles);  }  </code></pre>    <p>在这个 <code>F8StyleSheet</code> 函数中我们解析了前面示例代码中的 <code>styles</code> 对象,如果我们发现了匹配当前平台的 <code>ios</code> 或 <code>android</code>键值,就会应用相应的样式,如果都没有,则应用默认样式。以此看来,减少代码重复的另一种做法是:尽可能多地重用通用样式代码。</p>    <p>现在,我们已经可以在我们的App中重用这个组件了,它也可以根据不同的平台自动匹配相应的样式。</p>    <p>分离复杂差异</p>    <p>如果一个组件在各平台上的差异不仅仅是样式的不同,也存在大量的逻辑代码差异,那我们就需要换一种方式了。正如下图所示,iOS 和 Android 平台中最高阶的菜单导航组件就有非常大的差异:</p>    <p><a href="/misc/goto?guid=4959671498519885771"><img alt="iOS and Android Main Navigation Comparison" src="https://simg.open-open.com/show/d948149d6385df00d08f4ffbe58e761a.png"></a></p>    <p>正如你所见,在 iOS 版本中我们在屏幕底部放了一个固定的 Tab,而在 Android 版本中,我们却实现了一种可划出的侧边栏。这两种组件其实是本质上的不同,况且一般来说,在 Android 应用中,这种侧边栏通常还会包含更多的菜单选项,例如:退出登录。</p>    <p>你当然可以将这两种菜单模式写到一个组件中去,但是这个组件会变得异常臃肿,所有的差异不得不通过大量的分支语句来实现,你一定会在不久的将来对这段代码感到陌生难懂。</p>    <p>其实,我们可以用 React Native 内建的平台特定的扩展来解决这个问题。我们可以创建两个独立的应用,在下面的示例中我们会创建两个组件,分别命名为:<code>F8TabsView.ios.js</code> 和 <code>F8TabsView.android.js</code>。React Native 会自动检测当前平台并根据扩展命名加载相应的组件。</p>    <p>内建UI组件</p>    <p>在每一个 <code>FBTabsView</code> 组件中,我们也可以重用一些内建的 React Native UI 组件,Android 版本使用的是<a href="/misc/goto?guid=4959671498600803447"><code>DrawerLayoutAndroid</code></a>(很显然,只在 Android 中可用):</p>    <pre>  <code class="language-javascript">/* from js/tabs/F8TabsView.android.js */  render() {    return (      <DrawerLayoutAndroid        ref="drawer"        drawerWidth={300}        drawerPosition={DrawerLayoutAndroid.positions.Left}        renderNavigationView={this.renderNavigationView}>        <View style={styles.content} key={this.props.activeTab}>          {this.renderContent()}        </View>      </DrawerLayoutAndroid>    );  }</code></pre>    <p>在第8行代码中,我们在当前的类中显式地为 drawer 组件指定了 <code>renderNavigationView()</code> 函数。这个函数会返回 drawer 中渲染出来的内容。在这个示例中,我们渲染的是一个包含在自定义 <code>MenuItem</code> 组件(点击查看 <a href="/misc/goto?guid=4959671498687777012"><code>MenuItem.js</code></a>)中的 <a href="/misc/goto?guid=4959671498771585272"><code>ScrollView</code></a> 组件:</p>    <pre>  <code class="language-javascript">/* from js/tabs/F8TabsView.android.js */  renderNavigationView() {    ...    return(      <ScrollView style={styles.drawer}>        <MenuItem          title="Schedule"          selected={this.props.activeTab === 'schedule'}          onPress={this.onTabSelect.bind(this, 'schedule')}          icon={scheduleIcon}          selectedIcon={scheduleIconSelected}        />        <MenuItem          title="My F8"          selected={this.props.activeTab === 'my-schedule'}          onPress={this.onTabSelect.bind(this, 'my-schedule')}          icon={require('./schedule/img/my-schedule-icon.png')}          selectedIcon={require('./schedule/img/my-schedule-icon-active.png')}        />        <MenuItem          title="Map"          selected={this.props.activeTab === 'map'}          onPress={this.onTabSelect.bind(this, 'map')}          icon={require('./maps/img/maps-icon.png')}          selectedIcon={require('./maps/img/maps-icon-active.png')}        />        <MenuItem          title="Notifications"          selected={this.props.activeTab === 'notifications'}          onPress={this.onTabSelect.bind(this, 'notifications')}          badge={this.state.notificationsBadge}          icon={require('./notifications/img/notifications-icon.png')}          selectedIcon={require('./notifications/img/notifications-icon-active.png')}        />        <MenuItem          title="Info"          selected={this.props.activeTab === 'info'}          onPress={this.onTabSelect.bind(this, 'info')}          icon={require('./info/img/info-icon.png')}          selectedIcon={require('./info/img/info-icon-active.png')}        />      </ScrollView>    );  }</code></pre>    <p>相比之下,iOS 版本直接在 <code>render()</code> 函数中使用了一个不同的内建组件,<a href="/misc/goto?guid=4959671498849124944"><code>TabBarIOS</code></a>:</p>    <pre>  <code class="language-javascript">/* from js/tabs/F8TabsView.ios.js */  render() {    var scheduleIcon = this.props.day === 1      ? require('./schedule/img/schedule-icon-1.png')      : require('./schedule/img/schedule-icon-2.png');    var scheduleIconSelected = this.props.day === 1      ? require('./schedule/img/schedule-icon-1-active.png')      : require('./schedule/img/schedule-icon-2-active.png');    return (      <TabBarIOS tintColor={F8Colors.darkText}>        <TabBarItemIOS          title="Schedule"          selected={this.props.activeTab === 'schedule'}          onPress={this.onTabSelect.bind(this, 'schedule')}          icon={scheduleIcon}          selectedIcon={scheduleIconSelected}>          <GeneralScheduleView            navigator={this.props.navigator}            onDayChange={this.handleDayChange}          />        </TabBarItemIOS>        <TabBarItemIOS          title="My F8"          selected={this.props.activeTab === 'my-schedule'}          onPress={this.onTabSelect.bind(this, 'my-schedule')}          icon={require('./schedule/img/my-schedule-icon.png')}          selectedIcon={require('./schedule/img/my-schedule-icon-active.png')}>          <MyScheduleView            navigator={this.props.navigator}            onJumpToSchedule={() => this.props.onTabSelect('schedule')}          />        </TabBarItemIOS>        <TabBarItemIOS          title="Map"          selected={this.props.activeTab === 'map'}          onPress={this.onTabSelect.bind(this, 'map')}          icon={require('./maps/img/maps-icon.png')}          selectedIcon={require('./maps/img/maps-icon-active.png')}>          <F8MapView />        </TabBarItemIOS>        <TabBarItemIOS          title="Notifications"          selected={this.props.activeTab === 'notifications'}          onPress={this.onTabSelect.bind(this, 'notifications')}          badge={this.state.notificationsBadge}          icon={require('./notifications/img/notifications-icon.png')}          selectedIcon={require('./notifications/img/notifications-icon-active.png')}>          <F8NotificationsView navigator={this.props.navigator} />        </TabBarItemIOS>        <TabBarItemIOS          title="Info"          selected={this.props.activeTab === 'info'}          onPress={this.onTabSelect.bind(this, 'info')}          icon={require('./info/img/info-icon.png')}          selectedIcon={require('./info/img/info-icon-active.png')}>          <F8InfoView navigator={this.props.navigator} />        </TabBarItemIOS>      </TabBarIOS>    );  }</code></pre>    <p>显而易见,尽管 iOS 菜单接受了相同的数据,但是它的结构略有不同。我们并没有用一个独立的函数创建菜单元素,而是将这些元素作为父级菜单的子元素插入进来,正如 <a href="/misc/goto?guid=4959671498935578338"><code>TabBarItemIOS</code></a> 组件这样。 这里的 <code>TabBarItem</code> 与 Android 中 的 <code>MenuItem</code> 本质上是相同的,唯一的区别是在 Android 组件中我们会定义一个独立的主 <a href="/misc/goto?guid=4959664613058251222"><code>View</code> 组件</a>:</p>    <pre>  <code class="language-javascript"><View style={styles.content} key={this.props.activeTab}>    {this.renderContent()}  </View></code></pre>    <p>然后当一个 tab 改变时改变这个组件(通过 <code>renderContent()</code> 函数),而 iOS 组件则会有多个分离的 <code>View</code> 组件,例如:</p>    <pre>  <code class="language-javascript"><GeneralScheduleView    navigator={this.props.navigator}    onDayChange={this.handleDayChange}  /></code></pre>    <p>这是 <code>TabBarItem</code> 的一部分,可以点击使它们可见。</p>    <p>设计迭代周期</p>    <p>当你构建任何应用,无论是在移动平台还是 web 环境下,调整适配的 UI 元素是非常痛苦的。如果工程师和设计师共同协作,会使整个过程慢下来。</p>    <p>React Native 包含了一个<a href="/misc/goto?guid=4959671499038764799">实时重载</a>的 debug 功能,可以当 JavaScript 改变时触发刷新应用。这可以在极大程度上减少设计迭代过程,一旦改变了组件样式并保存后,你会立即看到更新的样式。</p>    <p>但是如果组件在不同条件下看起来不同怎么办呢?举个例子,一个按钮组件可能有一个默认样式,也分别包含按下、执行任务中、执行任务完成时的样式。</p>    <p>为了避免每次都与应用交互,我们内建了一个用于 debug 视觉效果的 <code>Playgroud</code> 组件:</p>    <pre>  <code class="language-javascript">/* 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>      );    }  }</code></pre>    <p>其实我们只是创建了一个可交换加载的空视图,将其与一些示例定义整合到其中一个 UI 组件中,正如下面这段<code>AddToScheduleButton.js</code> 所示:</p>    <pre>  <code class="language-javascript">/* 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} />;    });  };</code></pre>    <p>我们可以将这个应用转化为一个 UI 预览工具:</p>    <p><a href="/misc/goto?guid=4959671499125283695"><img alt="UI preview playground in action with a button and three different states" src="https://simg.open-open.com/show/0b7eeaaf1549309e61bb900eb7d7eebc.gif"></a></p>    <p>在这个示例中为这个按钮定义了按下和抬起两种状态,第三个按钮在这两者的状态之间不断循环,以此来预览过渡的动画效果。</p>    <p>现在,我们可以跟设计师一起快速调整基础组件的视觉样式了。</p>    <p>如果想用这个功能,<code><Playground></code> 组件必须在任何 React Native 应用中都可用,我们需要在 <code>setup()</code> 函数中交换一些代码来加载 <code><Playground></code> 组件:</p>    <pre>  <code class="language-javascript">/* from js/setup.js */  render() {    ...    return (      <Provider store={this.state.store}>        <F8App />      </Provider>    );  }</code></pre>    <p>变为</p>    <pre>  <code class="language-javascript">/* in js/setup.js */  render() {    ...    return (      <Provider store={this.state.store}>        <Playground />      </Provider>    );  }</code></pre>    <p>当然,你也可以修改 <code><Playground></code> 组件,使其能够改变引入的其它组件。</p>    <p>下一篇:<a href="http://www.open-open.com/lib/view/open1461512056952.html">构建 F8 2016 App 第三部分:React Native的数据交互</a></p>    <p>来源:<a href="/misc/goto?guid=4959671499209432110">pockr</a></p>