Question

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

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

home render
标题渲染
home render （为什么home会再次渲染？）
标题会收到道具
标题渲染

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

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

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

这是我的代码：

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>
        )
    }
}

React（Native）和组件生命周期和事件处理

0 个答案: