react-native - React Native 上的 TabBarIOS 未按预期工作

Question

我在为 React Native 实现 Tab Bar 时遇到问题。该文档不存在( http://facebook.github.io/react-native/docs/tabbarios.html )，并且其首页的示例不足(例如，缺少必需的属性图标)。

我设法从代码的角度实现了它，并且出现了一些东西。但只有一个浅蓝色的盒子占据了屏幕上一半的空间。

我的“工作”代码如下所示:

<TabBarIOS>
  <TabBarIOS.Item title="Wooden" selected={false} icon={require('image!wooden')}>
    <NavigatorIOS initialRoute={{ title: 'Wooden' }} />
  </TabBarIOS.Item>
</TabBarIOS>

但正如所说，最终结果出乎意料。

有没有人成功地实现了 TabBarIOS？我试图搜索源代码，但没有任何问题可以帮助我。

Answer 1

回答我自己的问题，这就是我让它工作的方式:

首先我们需要定义 TabBarItemIOS :

var React = require('react-native');
var {
  Image,
  StyleSheet,
  Text,
  View,
  TabBarIOS
} = React;

var TabBarItemIOS = TabBarIOS.Item;

然后，我们可以使用 helper 来定义图标:

function _icon(imageUri) {
  return {
    uri: imageUri,
    isStatic: true
  };
}

而且，嗯……实际代码的其余部分:

<TabBarIOS>
  <TabBarItemIOS
    icon={_icon('favorites')}>
  </TabBarItemIOS>
  <TabBarItemIOS
    icon={_icon('history')}>
  </TabBarItemIOS>
  <TabBarItemIOS
    icon={_icon('more')}>
  </TabBarItemIOS>
</TabBarIOS>

这至少返回基本类型的 TabBar。

这是基于可以从这里找到的示例: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TabBarExample.js