0

UIExplorer の Tabbar デモに似た、単純なタブ ベースの反応ネイティブ ナビゲーション アプリを作成しようとしています。しかし、別のタブを選択したときに、ナビゲーションバーのタイトルと左右のナビゲーションバーボタンを変更したいです。このナビゲーション バーの動作の例は、iPhone の「時計」アプリです。

UIExplorer の Tabbar デモは、ページ内のビューを置き換えるだけです。Tabbar アイテムの子コンポーネントとして 'NavigatorIOS' を埋め込もうとしましたが、エラーが発生しました: 'Invariant Violation: onlyChild must be passed a children with just one child.'. 回避策として、ナビゲーション バーのタイトルとボタンを手動で変更する機能があればうまくいくかもしれませんが、それもうまくいきませんでした。

4

1 に答える 1

2

試す...

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>
        );
    }
});
これにより、Navbar のタイトルを更新する際にタブ「ホーム」と「履歴」がレンダリングされます。

于 2015-03-30T05:42:11.590 に答える