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

Answer 2

我认为你的第一篇文章已经走上了正确的道路。你需要为你的图标使用正确的分辨率。更多信息在这里：Apple iOS Docs同一个图标需要有3个分辨率，例如32x32 = @1，64x64 = @2和92x92 = @3。

请记住遵循如何在React Static Resources原生文档中创建图像资源的说明。一个图像资源需要与Xcode中的图像资产同名。

也许你的图片没有像这个case那样的透明边框。

以下是我的工作代码：

...
var homeIconUnactive = require('image!home-unactive');
var homeIconActive = require('image!home-active');
...

<TabBarIOS.Item
    title='Home'
    selected={this.state.selectedTab === 'EventList'}
    icon={homeIconUnactive}
    selectedIcon={homeIconActive}
    onPress={() => {
        this.setState({
            selectedTab: 'EventList',
        });
    }}>
    <EventList/>
</TabBarIOS.Item>

我的标签图标在被选中时仍然是蓝色的…

Answer 3

当我尝试这样做时，"TabBarItemIOS“似乎崩溃了，并显示错误”不变的违规:必须向onlyChild传递一个恰好有一个子代的子代“。当嵌套的组件是"NavigatorIOS“时，就像你的例子一样。不过，当child是一个"View“组件时，它似乎可以正常工作。你让你的代码工作了吗？