键盘导致模态消失 React-Native答案

【问题标题】：Keyboard causes modal to disappear React-Native键盘导致模态消失 React-Native
【发布时间】：2019-04-13 21:12:54
【问题描述】：

我正在尝试做的工作流程如下：

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>

【问题讨论】：

你认为在没有键盘出现的情况下还能如何输入数据？
问题是我在打字时看不到模式。问题是严格的 UI，因为我可以成功输入数据，并且我成功地将数据发送到商店。

标签： javascript react-native view

【解决方案1】：

据我所知，问题可能是因为KeyboardAvoidingView 将 Modal 向上推到足以将其从视口移开。

尝试将负值传递给keyboardVerticalOffset 作为KeyboardAvoidingView 的道具。这个道具控制当键盘出现时模态被推到多远。

例子：

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

【讨论】：