Question

我要执行的工作流程如下：

1. 用户单击hamburger icon并获得dropdown。
1. 用户点击rename。
1. 出现一个模态，带有一个TextInput和两个分别指向accept和cancel的按钮。

我面临的问题在2/3之间。当我单击重命名时，模态会短暂出现，但随着键盘显示而消失。即使我看不到模式，我的击键仍然会注册到TextInput。当我关闭键盘时，模态再次出现。

这是我的代码：

<Modal
    animationType="slide"
    transparent={true}
    visible={renaming}
    onRequestClose={() => {
        Alert.alert('Modal has been closed.');
    }}>
    <KeyboardAvoidingView style={styles.modalMask} behavior="padding">
        <View style={styles.modalContainer}>
            {unitType === 'file' ?
                <Text style={styles.modalHeader}>Rename clip:</Text>
                    :
                <Text style={styles.modalHeader}>Rename folder:</Text>
            }

            <TextInput
                style={styles.modalInput}
                onChangeText={(newTitle) => this.setState({title: newTitle})}
                defaultValue={'tits'}
                autoFocus={true}
                selectTextOnFocus={true}
                keyboardAppearance={'dark'}
                maxLength={30}
            />

            <View style={styles.modalOptions}>
                <TouchableHighlight
                    onPress={() => {
                        this.handleCloseModal();
                    }}
                    style={styles.modalOption}
                >
                    <Text>CANCEL</Text>
                </TouchableHighlight>

                <TouchableHighlight
                    onPress={() => {
                        this.handleRename(id, unitType)}
                    }
                    style={[styles.modalOption, styles.renameOption]}
                >
                    <Text style={{color: 'white'}}>RENAME</Text>
                </TouchableHighlight>
            </View>

        </View>
    </KeyboardAvoidingView>
</Modal>

Answer 1

据我所知，问题可能出在KeyboardAvoidingView向上推了Modal以便将其从视口移开。

尝试将负值传递给keyboardVerticalOffset作为对KeyboardAvoidingView的支持。该道具控制键盘抬起时模态被推到多远。

示例：

<KeyboardAvoidingView style={styles.modalMask} behavior="padding" keyboardVerticalOffset= {-200}>
  <View>
    Your view
  </View>
</KeyboardAvoidingView>

键盘导致模式消失React-Native

1 个答案: