ptomasroos / react-native-tab-navigator

A tab bar that switches between scenes, written in JS for cross-platform support
MIT License
2.4k stars 415 forks source link

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. #91

Closed jaxlifu closed 8 years ago

jaxlifu commented 8 years ago

When I use Navigator and push to a class which has react-native-tab-navigator I get a error Warning: setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount.

class RN_Day15 extends Component {

    render() {
        return (
            <Navigator
                renderScene={
                    (route, navigator)=> {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator}/>
                    }
                }
                configureScene={()=>Navigator.SceneConfigs.FadeAndroid}
                initialRoute={{component: Main}}/>
        );
    }
}

class Main extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {selectedItem: 'home'};
    }

    onTabClick = (tabName)=> {
        this.setState({selectedItem: tabName});
    };

    render() {
        return (
            <TabNavigator>
                <TabNavigator.Item
                    onPress={this.onTabClick('home')}
                    selected={this.state.selectedItem === 'home'}
                    title={'首页'}>
                    <Text>这个是首页信息</Text>
                </TabNavigator.Item>
                <TabNavigator.Item
                    onPress={this.onTabClick('list')}
                    selected={this.state.selectedItem === 'list'}
                    title={'列表'}>
                    <Text>这个是列表页面</Text>
                </TabNavigator.Item>
                <TabNavigator.Item
                    onPress={this.onTabClick('chat')}
                    selected={this.state.selectedItem === 'chat'}
                    title={'聊天'}>
                    <Text>这个是聊天页面</Text>
                </TabNavigator.Item>
                <TabNavigator.Item
                    onPress={this.onTabClick('mine')}
                    selected={this.state.selectedItem === 'mine'}
                    title={'我的'}>
                    <Text>这个是我的页面</Text>
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
}

how can i fix it. Thanks!