【问题标题】:Prevent keyboard dismiss React Native inside Modal在 Modal 中防止键盘关闭 React Native
【发布时间】:2020-11-16 02:22:45
【问题描述】:

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

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

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

没有要更新的父 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>

【问题讨论】:

  • 可以分享点心吗?

标签: react-native react-native-modal


【解决方案1】:

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

【讨论】:

  • 我在 react native 中找不到 Swiper 组件,你从哪里得到的?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-11-25
  • 1970-01-01
  • 2015-12-28
  • 2019-10-06
  • 2012-10-12
  • 1970-01-01
  • 2019-06-26
相关资源
最近更新 更多