react-native - 通过 TabBarIOS 更改视图时如何更改导航栏标题和按钮？

Question

我正在尝试制作一个简单的基于选项卡的反应原生导航应用程序，类似于 UIExplorer 中的 Tabbar 演示。但是，当我选择不同的选项卡时，我希望导航栏的标题和左右导航栏按钮发生变化。这种导航栏行为的一个例子是 iPhone 上的“时钟”应用程序。

UIExplorer 的 Tabbar 演示只是替换了页面内的视图。我尝试嵌入一个“NavigatorIOS”作为选项卡项的子组件，但它给出了一个错误：“不变违规：onlyChild 必须传递一个只有一个孩子的孩子。”。作为一种解决方法，能够手动修改导航栏标题和按钮可能会起作用，但我也没有成功。

Answer 1

尝试...

var TabBarItemIOS = TabBarIOS.Item;
var homeView = require('./App/Views/Home');
var historyView = require('./App/Views/History');

var myapp = React.createClass({

    getInitialState: function() {
        return {
            selectedTab: 'homeTab',
        };
    },

    render: function() {

        return (
            <TabBarIOS
                selectedTab={this.state.selectedTab}>
                <TabBarItemIOS
                    accessibilityLabel="Home"
                    title="Home"
                    name="homeTab"
                    selected={this.state.selectedTab === 'homeTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'homeTab'
                        });
                    }}>
                <NavigatorIOS
                    tintColor='#FF6600'
                    initialRoute={{
                        title: 'Home',
                        component: homeView,
                    }}/>
                </TabBarItemIOS>

                <TabBarItemIOS
                    accessibilityLabel="History"
                    title="History"
                    name="historyTab"
                    selected={this.state.selectedTab === 'historyTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'historyTab',
                        });
                    }}>
                    <NavigatorIOS
                        tintColor='#FF6600'
                        initialRoute={{
                            title: 'History'
                            component: historyView,
                        }}/>
                </TabBarItemIOS>
            </TabBarIOS>
        );
    }
});

这将在更新导航栏标题时呈现选项卡“主页”和“历史记录”。