Question

当我按下NavigatorIOS React Native组件上的通知按钮时，我试图打开一个侧面菜单，但是当父级状态发生变化时，子组件似乎没有更新。因此，按下通知按钮并不是我想要它做的事情。父子组件如下。当使用NavigatorIOS更改父状态时，如何更新子组件？

export default class App extends React.Component {



    constructor(props) {
        super(props);
        this.state = {
            rightMenuOpen: false
        }

        this.rightButtonPress = this.rightButtonPress.bind(this);
      }

    rightButtonPress() {
        this.setState({rightMenuOpen: true});
    }

    render() {
        return (
            <NavigatorIOS
                initialRoute={{
                component: Home,
                rightButtonIcon: source=require('./img/notifications.png'),
                onRightButtonPress: this.rightButtonPress,
                passProps: {index: 1, rightMenuOpen: this.state.rightMenuOpen},
                }}
                style={{flex: 1}}
            />
        )
    }
}

class Home extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {
        const menu = <Switch/>
        return (

            <View style={styles.body}>
                <SideMenu
                    menu={infoText}
                    menuPosition="right"
                    disableGestures={true}
                    isOpen={this.props.rightMenuOpen}
                >
                    <WebView
                        source={{uri: 'https://www.michigandaily.com/'}}
                        bounces={false}
                    />
                </SideMenu>
            </View>
        );
    }
}

Answer 1

您尝试此操作的方式不会起作用，因为更改passProps的值不会导致重新渲染。您需要的是一种使用事件发射器或状态管理框架从父母传递信号给孩子的方法。

如何使用事件发射器的示例： https://colinramsay.co.uk/2015/07/04/react-native-eventemitters.html

我还建议使用像Redux或Mobx这样的状态管理框架（我更喜欢Mobx的简单性）。

您可以在此处了解有关Mobx的更多信息：http://mobx.js.org

父状态更改时，React Native NavigatorIOS子组件不会更新

1 个答案: