我一直在学习React Native with Expo . 决定使用小型双屏应用程序来理解“反应方式”，但我无法弄清楚如何在React中思考 .

我相信我不了解组件生命周期 . 在下面的示例代码中，我的控制台输出是：

  • 主页渲染

  • Headers 渲染

  • home渲染（为什么home再次渲染？）

  • Headers 会收到道具

  • Headers 渲染

由于我的 Headers 是StackNavigator的自定义组件，我不能通过props（afaik？）将事件处理程序传递给它所以我必须在HomeScreen的componentDidMount / WillMount事件中进行setParams调用，但是当我这样做时，我的整个HomeScreen重新渲染本身就是为什么？

当我的HomeScreen中有一个可能显示100个项目的FlatListView时会发生什么 . 我的主屏幕及其所有的孩子将在一开始就重新渲染？

将道具传递给自定义导航 Headers 也是我不完全理解的另一件事 . 我不知道如何将屏幕特定的navigationOptions传递给我的自定义 Headers . 假如我决定在每个屏幕上传递"title"参数，如果我在路由上定义特定的navigationOptions属性，我的自定义标头不会获得这些参数 .

这是我的代码：

Router.js

export const RootStack = StackNavigator(
{
    Home: { screen: HomeScreen }
},
{
    navigationOptions: ({navigation}) =>
    {
        return { header: <MainHeader navigation={navigation} /> }
    }
});

App.js

class App() {
    render() {
        return <RootStack />
    }
}

HomeScreen.js

export default class HomeScreen extends React.Component {

    constructor(props) {
        super(props);

        this.refCheck = "Home Screen";
    }

    componentDidMount() {
        this.props.navigation.setParams({ onMenuClick: this._handleMenuClick });
    }

    _handleMenuClick = () => {
        console.log("Handle menu click. - " + this.refCheck);
    }

    render() {
        console.log("home render");
        return (
            <SafeAreaView style={styles.container}>
                <Text>Home Screen</Text>
            </SafeAreaView>
        )
    }
}

MainHeader.js

export default class MainHeader extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        console.log("header will receive props");
    }

    render() {
        console.log("header render");
        return (
            <View style={styles.header}>
                <Text>Menu</Text>
                <Text>Logo</Text>
                <Text>Search</Text>
            </View>
        )
    }
}
javascript react-native react-router