Question

我在RN项目中使用“ react-native-popup-dialog”和“ react-navigation”。我想在标题上添加一个用于搜索的按钮。单击该按钮可打开一个对话框，其中包含要搜索的输入字段。

在“ react-native-popup-dialog”中，我需要调用show（）方法以显示popUpDialog，

this.popUpDialogForSearch.show();

在“反应导航”中，我需要在静态区域为按钮设置onPress方法，以进行“反应导航”的设计。

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>

现在，我制作对话框的代码无法按预期方式关闭，并且如果一个对话框没有关闭，则无法打开其他页面中的另一个对话框。

它使我困惑了一段时间。

有没有建议在静态区域调用实例方法？谢谢。

Answer 1

我发现，当我触发“远程调试JS”模式时，就会出现此问题。

禁用此模式后，弹出对话框可以关闭。

我现在还真的不知道根本原因，我会跟踪它。

谢谢。

在react-navigation标头中使用

1 个答案: