javascript - 在 React Native 应用程序的每个页面上包含 TabBarIOS？

Question

在我的 React Native 应用程序中，我在 HomePage 组件中定义 TabBarIOS 选项卡。单击各个选项卡后，将调用从与这些选项卡关联的其他类加载组件的函数。但是，如果我在这些组件中使用导航器来推送新屏幕，TabBarIOS 就会消失(如预期)，并且我无法弄清楚如何重新处理它，以便它在这些组件的所有子屏幕上保持可见。我已经包含了相关代码；任何建议将不胜感激!

TabBarIOS 渲染:

  render: function() {
return (
  <TabBarIOS
    tintColor="white"
    barTintColor="#cee4dc">
    <Icon.TabBarItemIOS
      title="PROFILE"
      selected={this.state.selectedTab === TABS.profile}
      iconName="ios-profile"
      selectedIconName="ios-profile"
      onPress={() => {
        this.setState({
          selectedTab: TABS.profile,
        });
      }}>
     {this._renderProfile()}
    </Icon.TabBarItemIOS>
    <Icon.TabBarItemIOS
      title="HOME"
      selected={this.state.selectedTab === TABS.home}
      iconName="ios-home"
      selectedIconName="ios-home"
      onPress={() => {
        this.setState({
          selectedTab: TABS.home,
        });
      }}>
     {this._renderHome()}
    </Icon.TabBarItemIOS>
    <Icon.TabBarItemIOS
      title="FEED"
      selected={this.state.selectedTab === TABS.feed}
      iconName="ios-feed"
      selectedIconName="ios-feed"
      onPress={() => {
        this.setState({
          selectedTab: TABS.feed,
        });
      }}>
     {this._renderFeed()}
    </Icon.TabBarItemIOS>
  </TabBarIOS>
);
},

渲染特定选项卡组件:

  _renderFeed: function(){
      return(
        <Feed navigator = {this.props.navigator} />
      );
    },
 _renderHome: function(){
      return(
        <Home navigator = {this.props.navigator} />
      );
    },
 _renderProfile: function(){
      return(
        <Profile navigator = {this.props.navigator} />
      );
    },

在 ListView rowPressed 上导航到主页中的下一个组件:

rowPressed: function(hunt) {
    this.props.navigator.push({
        title: "Item",
        component: ItemOverview,
        passProps: {
            item: item,
        }
    });
},

Answer 1

我认为您希望标签栏显示在每个 View 中，对吗？您需要一个路由器来帮助提高效率。

尝试使用react-native-router-flux为了支持您，此路由器解决方案已支持选项卡栏。