Question

我们的react-native应用程序中的当前导航存在问题。我们使用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有几个按钮。其中一个人对配置文件场景采取了行动。像这样：

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

如果我点击个人资料按钮，它只能在第一次使用。当我返回并再次单击配置文件按钮按钮时，我收到错误：

navigationState.children [3] .key“scene_2_PROFILE_TABBAR”与其他孩子发生冲突！

代码有什么问题？我错误地使用了动作吗？我还能如何构建我的代码？

Answer 1

试试这个：

Actions.pop()
   setTimeout(()=>{
   Actions[PROFILE_TABBAR]()
})

Answer 2

尝试将type={ActionConst.RESET}添加到您的顶级场景，如下所示：

<Router createReducer={this.reducerCreate.bind(this)} getSceneStyle={getSceneStyle}>
<Scene key="root" hideNavBar={true}>
    <Scene key={PROFILE_TABBAR} hideNavBar={true}  type={ActionConst.RESET}>
        <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}  type={ActionConst.RESET}>
            <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>

你可以在这里找到更多： https://github.com/aksonov/react-native-router-flux/issues/782

React Native - navigationState.children [3] .key“SCENE_2”与另一个孩子发生冲突

2 个答案: