渲染屏幕时自动调用函数

Question

所以我有一个 header 栏，当我使用 stackNavigation

打开个人资料屏幕时，我会隐藏它

个人资料屏幕：

export default class ProfileScreen extends React.Component {
    constructor(props) {
        super(props);
        props.screenProps.updateHeader();
    }
// Code goes on
//..........
//................
//...........................
}

这从 parent class 调用 updateHeader 然后调用函数

主要 (Parent class):

export default class Main extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            showHeader: true
        };
    }

    updateState = () => {
        this.setState({
            showHeader: !this.state.showHeader
        });
    }

    render() {
        return (
            <View style={styles.container}>
                {renderIf(this.state.showHeader,
                    <Header />
                )}
               <UserStack screenProps={{ updateHeader: this.updateState }} />
             </View>
        );
     }
}

它工作但有点慢。

导出项目会更好用吗？

我也收到这个警告：

警告：无法在现有状态转换期间更新（例如在 render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数 side-effects 是一个 anti-pattern，但可以移动到 componentWillMount。

我应该怎么做才能解决这个问题？

Answer 1

正如 ewizard 所说，从

调用它

componentWillMount() { this.props.screenProps.updateHeader(); }

而不是构造函数修复警告。

渲染屏幕时自动调用函数

Calling a function automatically when rendering a screen

javascript

react-native

navigation

expo

stack-navigator