在React Native中关闭抽屉后如何重新加载数据视图组件？

Question

我是React Native的新手。如何更改抽屉菜单中的设置1（如在图像屏幕1中所示）后如何在page.js中重新加载，然后关闭Drawer，然后像图像屏幕2一样重新加载page.js，这是我的代码：

MainDrawer.js文件

class SideBar extends React.Component {
  constructor(props) {
   this.state = {
      setSetting: 'set 2',
      setSettingId: 0,
      setSetting_option: null,
    }
  }

  render() {
    return (
      <ModalDropdown
        options={this.state.settingView_option}
        defaultIndex={0}
        defaultValue={this.state.setSetting}
        onDropdownWillShow={this._setSetting_willShow.bind(this)}
        onSelect={(idx, value) => this._setSetting_onSelect(idx, value)}
      />
     <View>
       <Text>Log Out</Text>
     </View>
    )
  }

  _setSetting_willShow() {
    this.setState({
      setSetting_option: ['Set 1', 'Set 2'],
    })
  }

  _setSetting_onSelect(idx, value) {
    this.setState({ setSetting: value, setSettingId: idx });
    this.props.navigation.closeDrawer(); 
  }
}

const mainDrawer = createDrawerNavigator({
  MainMenu: {
    screen: MainMenu,
  },
}, {
    initialRouteName: "MainMenu",
    contentComponent: props => <SideBar {...props} />,
  });

export default mainDrawer;

文件Page.js

class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      setSetting: 2,
    }
  }

  render() {
    return (
      <View>
        <View>
          <TouchableOpacity
            onPress={() => this.props.navigation.openDrawer()}
          >
            <Image
              source={ImageUrl.drawerImg}
              style={styles.iconDrawer}
            />
          </TouchableOpacity>
        </View>
        <View>
        {this.state.setSetting == 1 ?
          <View>
            <Text>Data 1</Text>
            <Text>Description Data 1</Text>
          </View>
          :
          <View>
            <Text>Data 2</Text>
            <Text>Description Data 2</Text>
          </View>
        }
        </View>
      </View>
    )
  }
}

export default Page;

和此图像屏幕1

和图像屏幕2像这样：

对此如何解决，谢谢