在 Modal 中防止键盘关闭 React Native

Posted 2023-02-16

【中文标题】在 Modal 中防止键盘关闭 React Native

【英文标题】：Prevent keyboard dismiss React Native inside Modal

【发布时间】：2020-11-16 02:22:45

【问题描述】：

我在屏幕底部有一个文本输入，按下时会扩展为一个更大的部分，其中包含一些选项。 bottomHeight 和 height 在键盘打开时增加。

当按下额外容器中的这些预定义tags 之一时，我不想关闭键盘，但我无法让它工作，需要一些帮助。

我已将textinput 包装在滚动视图中，以尝试按照其他地方的建议使用keyboardShouldPersistTaps 和keyboardDismissMode，但它不起作用。

没有要更新的父 ScrollViews、ListViews 或 FlatLists，但是此组件位于 Modal 内部，由 SafeAreaView 包装

<KeyboardAvoidingView style= position: 'absolute', bottom: this.props.bottomHeight, left: 0, right: 0, height: this.props.height >

// not sure if I need this inner scrollview, ideally it should just be a view
    <ScrollView style=this._computeBottomContainer() keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag">
        <TextInput
            style=styles.filter
            placeholder="Type to filter tags"
            onChangeText=(text) => this.props.suggestTags(text)
            selectionColor="black"
            blurOnSubmit=false
        />

         this.props.keyboardOpen &&
            <View style=styles.tagsOuterContainer>
                <Text style=styles.suggest>Suggested tags: this.props.suggestedTags.length</Text>

                <View style=styles.tagsInnerContainer>
                    <FlatList
                        data=this.props.suggestedTags
                        horizontal=true
                        renderItem=this.renderTag
                        keyExtractor=( item, index) => item + index
                        keyboardShouldPersistTaps='always'
                        keyboardDismissMode='on-drag'
                    />
                </View>
            </View>
        
    </ScrollView>
</KeyboardAvoidingView>

【问题讨论】：

可以分享点心吗？

【参考方案1】：

在我的应用程序的根部，我有一个 <Swiper /> 元素，它基本上是一个 ScrollView。将keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag" 作为道具添加到 Swiper 解决了我的问题

【讨论】：

我在 react native 中找不到 Swiper 组件，你从哪里得到的？