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

我在为React Native实现选项卡栏时遇到问题。文档不存在（），并且首页上的示例不足（例如缺少必需的属性图标）

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

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

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

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

---

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

回答我自己的问题，我就是这样让它工作的：

首先，我们需要定义

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>

这将返回至少基本类型的选项卡栏

---

这是基于下面的例子：

我也遇到了同样的问题。但的确，UIExplorer中有一些示例显示了图标的基本用法。但不幸的是，现在只有12个默认系统图标可用。源代码如下：

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

{
这是我的国家({
selectedTab:“scheduleTab”
});
}}>

当我尝试此操作时，“TabBarItemIOS”似乎会崩溃，并出现一个错误“不变冲突：只有一个孩子必须被传递给一个只有一个孩子的孩子。”当嵌套组件出现“NavigatorIOS”时，如您的示例所示。当child是一个“视图”组件时，它似乎可以工作。你的代码运行了吗

我认为你的第一篇文章已经走上了正确的轨道。您需要为图标使用正确的分辨率。详情如下： 同一图标需要有3个分辨率，例如32x32=@1、64x64=@2和92x92=@3

请记住按照如何在React Native Docs for中创建图像资产的说明进行操作。一个映像资源需要与Xcode中的映像资源具有相同的名称

也许你的图像没有像这样的透明边框

这是我的工作代码：

...
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>

。。。
var homeIconUnactive=require（'image！home unactive'）；
var homeIconActive=require（'image！home active'）；
...
{
这是我的国家({
已选择选项卡：“事件列表”，
});
}}>

---

“我的选项卡”图标在被选中时仍然是蓝色的，但…

不确定您到底想做什么。要让tabBarIOS正常工作，你需要按照你说的从

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

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

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>
   );
 }
};

类示例扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
已选择选项卡：“sassi”，
}
}
homeHandleChange（）{
这是我的国家({
已选择选项卡：“主页”，
})
};
关于改变{
这是我的国家({
已选择选项卡：“关于”，
})
};
creditHandleChange（）{
这是我的国家({
已选择选项卡：“学分”，
})
};
render（）{
返回(
);
}
};

这是因为TabBarItemIOS需要一个孩子，如果它是一个空标签，它将不起作用。请注意，这个问题是在去年3月提出的，当时React-Native非常不成熟，情况非常不同，例如需要图标。谢谢你的代码将答案更新到当前版本（0.16）。哦，对不起，我没有意识到，不管怎样，它可能仍然会帮助一些人

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>
   );
 }
};