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

问题描述：

我试图在按下NavigatorIOS React Native组件上的通知按钮时打开一个侧面菜单，但子组件似乎不是当父母的状态改变时更新。因此，按通知按钮并没有做我想做的事情。父母和孩子的组成如下。如何使用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> 
     ); 
    } 
}

答

您尝试这种方式将无法正常工作，因为对passProps值的更改不会导致重新呈现。您需要的是使用事件发射器或状态管理框架将信号传递给父节点的方法。

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

我还建议使用状态管理框架像终极版或Mobx（我喜欢Mobx它的简单）。

您可以在这里了解更多关于Mobx的信息：http://mobx.js.org

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

相关推荐