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;

然后,我们可以使用帮助器来定义图标:

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