鍵盤導致模式消失React-Native

Question

我正在嘗試做的工作流程如下：

• 1. 用戶單擊hamburger icon並獲得一個dropdown 。
• 2. 用戶單擊rename 。
• 3. 出現一個模態，帶有一個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>