React Native 上的 TabBarIOS 未按预期工作 [英] TabBarIOS on React Native not working as expected

问题描述

我在为 React Native 实现 Tab Bar 时遇到问题.该文档不存在(http://facebook.github.io/react-native/docs/tabbarios.html).html) 和他们首页上的例子是不够的(例如缺少必需的属性图标).

I'm having problems on implementing Tab Bar for React Native. The documentation does not exist (http://facebook.github.io/react-native/docs/tabbarios.html) and the example at their front page is insufficient (e.g. missing required property icon).

我设法从代码的角度实现了它，结果出现了一些问题.但是只有一个浅蓝色的盒子占据了屏幕上一半的空间.

I managed to implement it from code point-of-view and something showed up. But only a light blue box taking half of the space on the screen.

我的工作"代码如下所示:

My "working" code looked like this:

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

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

But like said, the end result was not expected.

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

Has anyone managed to implement TabBarIOS successfully? I tried to search through source code but there were no gotchas that would've helped me.

推荐答案

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

Answering to my own question, this is how I got it working:

首先我们需要定义TabBarItemIOS:

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

var TabBarItemIOS = TabBarIOS.Item;

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

Then, we can use a helper for defining icons:

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

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

And, well... the rest of the actual code:

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

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

This returns at least basic kind of TabBar.

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

This is based on the example which can be found from here: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TabBarExample.js

这篇关于React Native 上的 TabBarIOS 未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！