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 Docs中创建图片资源。一个图像资源需要与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

当我尝试这个时，＆＃34; TabBarItemIOS＆＃34;似乎崩溃了，并且出现了一个错误＆＃39; Invariant Violation：onlyChild必须通过一个只有一个孩子的孩子。＆＃39;当嵌套组件a＆＃34; NavigatorIOS＆＃34;就像你的例子。它似乎适用于孩子是一个＆＃34; View＆＃34;虽然组件。你的代码工作了吗？

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>

React Native上的TabBarIOS无法按预期工作

5 个答案: