javascript - React Native - navigationState.children[3].key "SCENE_2" が別の子と競合する

Question

反応ネイティブ アプリの現在のナビゲーションに問題があります。react-native-router-fluxモジュールを使用します。

ルーター構造は次のようになります。

<Router createReducer={this.reducerCreate.bind(this)} getSceneStyle={getSceneStyle}>
    <Scene key="root" hideNavBar={true}>
        <Scene key={PROFILE_TABBAR} hideNavBar={true}>
            <Scene key={PROFILE} hideNavBar={true} component={ProfileContainer}/>
            <Scene key={PROFILE_PASSWORD} hideNavBar={true} component={PasswordContainer}/>
        </Scene>    
        <Scene key="tabbar" hideNavBar={true} component={TabBar} initial={true}>
            <Scene key="tabbar_inner" tabs={true} hideNavBar={true}>
                <Scene key={TAB_1} component={Tab1Container} number={1} title={TAB_1} hideNavBar={true}/>
                <Scene key={TAB_2} component={Tab2Container} number={2} title={TAB_2} hideNavBar={true} />
                <Scene key={TAB_3}  component={Tab3Container} number={3} title={TAB_3} hideNavBar={true} />
            </Scene>                           
        </Scene>
    </Scene>
</Router>

次のような独自の TabBar を使用します。

import {Actions, DefaultRenderer} from 'react-native-router-flux';

import TabBar from './bar';

..

export default class extends Component {

    render(){

        const children = this.props.navigationState.children;
        const state = children[0];

        return (
            <View style={styles.container}>            
              <DefaultRenderer
                navigationState={state}
                key={state.key}
                {...state}
                onNavigate={this.props.onNavigate}
              />
              <TabBar />
            </View>
        );

    }

}

TabBar にはいくつかのボタンがあります。そのうちの 1 つは、プロファイル シーンへのアクションがあります。そのようです：

{()=>Actions[PROFILE_TABBAR]()}

プロファイル ボタンをクリックすると、初回のみ機能します。戻ってプロファイルボタンボタンをもう一度クリックすると、エラーが発生しました：

navigationState.children[3].key "scene_2_PROFILE_TABBAR" が別の子と競合しています!

コードの何が問題になっていますか? アクションを間違って使用しましたか? 他にどのようにコードを構成できますか?