react-native-popup-dialog cannot dismiss when using in react-navigation header
Clash Royale CLAN TAG#URR8PPP
react-native-popup-dialog cannot dismiss when using in react-navigation header
I am using "react-native-popup-dialog" and "react-navigation" in my RN project. I want to add a button on my header for Search. Clicking the button to open a dialog with input fields to search.
In "react-native-popup-dialog", I need to call show() method to show the popUpDialog,
this.popUpDialogForSearch.show();
In "react-navigation", I need to set the onPress method for my button in static area for the "react-navigation"'s design.
constructor(props)
super(props);
this.state =
dialogVisible: false,
;
static navigationOptions = ( navigation ) =>
return
header: <Header hasSegment>
<Left>
<Button transparent onPress=() => navigation.navigate("Home")>
<Icon name="ios-arrow-back" style=styles.icon/>
</Button>
</Left>
<Body style= flex: 1.45 >
<Segment style=styles.segmentStyle>
<Button style=styles.leftRoundBorder first><Text>查看待办列表</Text></Button>
<Button onPress=() => navigation.navigate("AddNormalStoreIn"); ><Text>添加一般入库单</Text></Button>
<Button onPress=() => navigation.navigate("AddConstructionStoreIn"); style=styles.rightRoundBorder last><Text>添加施工入库单</Text></Button>
</Segment>
</Body>
<Right style=styles.iconPosition>
<Button transparent>
<Icon name="search" onPress= navigation.getParam("popUpDialog") style=styles.icon/>
</Button>
</Right>
</Header>,
;
;
componentDidMount()
this.props.navigation.setParams( popUpDialog: this._searchPopUpDialog );
this.fetchFindStoreIn();
componentDidUpdate()
if (this.state.dialogVisible)
this.popUpDialogForSearch.show();
_searchPopUpDialog = () =>
this.setState( dialogVisible: true );
;
....
<PopupDialog
ref= (popUpDialog) => this.popUpDialogForSearch = popUpDialog
onDismissed= () => this.setState( dialogVisible: false )
width=0.7
height=0.7
containerStyle=
// TODO: dynamic height
marginTop: -50,
dialogTitle=
<DialogTitle
title="入库单搜索"
haveTitleBar=false
/>
>
<SearchForm />
</PopupDialog>
Now my code making the dialog can't dismiss as expected, and if one dialog doesn't close, the other dialog in other pages cannot be opened.
It wired and confusing me for a while.
Any suggestion to call an instance method in the static area? Thanks.
1 Answer
1
I have found out that when I triggering "Debug JS Remotely" mode, the issue will occur.
Once I disable this mode, the popUp dialog can be closed expected.
I don't really know the root cause now, I will keep track of it.
Thanks.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.