Question

I get the following warning every time i hit the same item in the drawer twice:

Warning: flattenChildren(...): Encountered two children with the same key, `scene_1`. Child keys must be unique; when two children share a key, only the first child will be used.

Here is my code:

import React from 'react';
import {
    View, Navigator,DrawerLayoutAndroid, Text, TouchableHighlight
} from 'react-native';

const ROUTES = [ { name: 'Main' } ];

export default class App extends React.Component {
    render () {
        return (
            <View style={{ flex: 1 }}>
                <DrawerLayoutAndroid
                    ref="drawer"
                    drawerWidth={300}
                    renderNavigationView={() => (
                        <View>
                            <TouchableHighlight
                                key={ROUTES[0].name}
                                onPress={() => this.refs.navigator.push(ROUTES[0])}
                            >
                                <Text>{ROUTES[0].name}</Text>
                            </TouchableHighlight>
                        </View>
                    )}
                >
                    <Navigator
                        ref="navigator"
                        initialRoute={ROUTES[0]}
                        renderScene={route => <Text>Scene {route.name}</Text>}
                    />
                </DrawerLayoutAndroid>
            </View>
        );
    }
}

Currently i don't know how do deal with this. This warning also looks very common for different problems.

Anyone has an idea how to solve this?

Answer 1

看起来，使用this.refs.navigator.replace(...)代替this.refs.navigator.push(...)可以解决问题。

Answer 2

对于可能遇到同样问题的其他人：当您尝试推送已在Navigator堆栈中的路由时，会发生此错误。那是被禁止的。在这种情况下，最好使用相同的组件推送新路由，或者如果它是可复制的路由，则替换最后一个路由。

Warning: flattenChildren(...) with react-native Navigator and DrawerLayoutAndroid

2 个答案: