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

Answer 2

我认为您的第一篇文章已经步入正轨。您需要为您的图标使用正确的分辨率。更多信息：Apple iOS Docs 同一个图标需要有 3 种分辨率，例如 32x32 = @1、64x64 = @2 和 92x92 = @3。

请记住按照Static Resources 的 React Native 文档中的说明如何创建图像资产。一个图片资源需要与 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”时。不过，当孩子是“视图”组件时，它似乎可以工作。你的代码工作了吗？

Answer 4

不确定您到底要做什么。要让 tabBarIOS 正常工作，您需要按照您所说的开始

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  TabBarIOS,
} = React;

然后创建你的类。然后创建构造函数，该构造函数启动要选择的选项卡，然后您需要制作更改所选选项卡的方法 - 选择选项卡时它是蓝色的。然后你的渲染返回每个 TabBarIOS，在每个 TabBarIOS.item 内，你必须调用你希望它去的页面

class example extends React.Component{
 constructor(props){
 super(props)
 this.state = {
  selectedTab: 'sassi',
 }
}

 homeHandleChange(){
  this.setState({
  selectedTab: 'home',
 })
};
aboutHandleChange(){
  this.setState({
    selectedTab: 'about',
   })
 };

 creditHandleChange(){
  this.setState({
    selectedTab: 'credits',
   })
 };

render() {
  return (
    <View style={styles.container}>
      <View style={styles.footer}>

        <TabBarIOS>

          <TabBarIOS.Item 
            title="home List" 
            selected={this.state.selectedTab === "home"}
            icon={require("./App/assets/youricon.png")}
            onPress={this.homeHandleChange.bind(this)} >
            <View style={styles.main}>
              <home></home>
            </View>
          </TabBarIOS.Item>

          <TabBarIOS.Item 
            title="credits" 
            selected={this.state.selectedTab === "credits"}
            icon={require("./App/assets/yourIcon.png")}
            onPress={this.creditsHandleChange.bind(this)} >
            <View style={styles.main}>
              <credits></credits>
            </View>
          </TabBarIOS.Item>

        <TabBarIOS.Item 
          title="About" 
          selected={this.state.selectedTab === "about"}
          icon={require("./App/assets/aboutIcon.png")}
          onPress={this.aboutHandleChange.bind(this)} >
          <View style={styles.main}>
            <About></About>
          </View>
        </TabBarIOS.Item>

       </TabBarIOS>

      </View>
    </View>
   );
 }
};

Answer 5

我遇到了同样的问题。但是是的，来自 UIExplorer 的示例显示了图标的基本用法。但不幸的是，现在只有 12 个默认系统图标可用。源码在这里：https://github.com/facebook/react-native/blob/master/React/Views/RCTTabBarItem.m#L28

我对 object-c 代码不太熟悉，所以我仍然对如何设置自定义图标感到困惑。但是你现在可以这样（希望有人能尽快得到更好的解决方案）：

<TabBarIOS
  selectedTab={this.state.selectedTab}>
  <TabBarItemIOS
    accessibilityLabel="Schedule"
    title="Schedule"
    name="scheduleTab"
    icon={{}}
    selected={this.state.selectedTab === 'scheduleTab'}
    onPress={() => {
      this.setState({
        selectedTab: 'scheduleTab'
      });
    }}>
    <NavigatorIOS
      style={styles.container}
      initialRoute={{
        title: 'Schedule',
        component: SchedulePage,
      }}
    />
  </TabBarItemIOS>
</TabBarIOS>