【发布时间】: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>
【问题讨论】:
-
可以分享点心吗?
标签: react-native react-native-modal