reactjs - 如何强制反应原生内容忽略键盘?
问题描述
我尝试同时使用 KeyboardAvoidingView 和 ScrollView 来防止我的内容在键盘存在时被挤压(向上推)。我已经尝试使用填充、高度和位置来处理我的行为,但没有任何效果。有人可以告诉我如何强制我的内容忽略键盘而不被推高吗?
return (
<View style={{height: '100%', backgroundColor: '#D6D6D6', position: 'relative'}}>
<View style={styles.wrapper}>
<View style={{height:'100%', borderRadius: 7}}>
<View style={styles.container}>
<ScrollView style={{borderRadius: 7}}
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={10}
pagingEnabled
onScroll={
Animated.event(
[{nativeEvent: {contentOffset: {x: this.animVal}}}]
)
}
>
{imageArray}
</ScrollView>
<View style={styles.listViewContainer}>
<TouchableOpacity style={styles.listView} onPress={() => Actions.pop()}>
<View style={{flex: 1, flexBasis: 22}}>{listIcon}</View>
<View style={{flex: 2, flexBasis: 57}}><Text style={{color: '#fff'}}>List View</Text></View>
</TouchableOpacity>
</View>
<View style={styles.circleContainer}>
{circleArray}
</View>
</View>
<View style={styles.productsSection}>
<Text style={styles.title}>{prodDesc}</Text>
<Text style={styles.desc}>{prodBrand}</Text>
<Text style={styles.desc}>Item: {prodId || ''}</Text>
<Text style={[styles.desc, {marginBottom: 15}]}>Category: {prodCat}</Text>
<Table borderStyle={{borderWidth: 0}}>
<Rows data={rows}/>
</Table>
</View>
<View style={styles.bodyFooter}>
<QuantityCounter style={{width: '100%', display: 'block', marginRight: 20}} data={{productId: prodId}} />
</View>
</View>
</View>
<View style={styles.footer}>
<View style={styles.cartContainer}>
{cartIcon}
<Text style={{color: '#3A3A3A', fontSize: 14}}>18 items</Text>
</View>
<TouchableOpacity style={styles.viewCartButtonContainer} onPress={() => this.cartRedirect() }>
<Text style={{color: '#fff', fontSize: 15, marginTop: '5%'}}>View Cart</Text>
</TouchableOpacity>
</View>
<Header/>
</View >
);
这是我的主要风格:
var styles = StyleSheet.create({
wrapper: {
backgroundColor: '#E6E6E6',
marginVertical: 15,
marginHorizontal: 10,
borderRadius: 7,
elevation: 3,
maxHeight: '80%',
flexShrink: 1,
zIndex: 0,
marginTop: 75
},
container: {
flex: 1.7,
justifyContent: 'space-between',
alignItems: 'center',
height: '50%',
borderRadius: 7
},
footer: {
justifyContent:'space-between',
alignItems: 'center',
height: '10%',
backgroundColor: '#E6E6E6',
paddingVertical: 15,
paddingHorizontal: 17,
flexDirection: 'row',
borderStyle: 'solid',
borderTopColor: '#8E8E93',
borderTopWidth: 1
},
cartContainer: {
flexDirection: 'row',
width: '35%'
},
viewCartButtonContainer: {
backgroundColor: '#356FAF',
height: '90%',
width: '45%',
padding: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3
},
bodyFooter: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
flex: 0.45,
borderTopColor: '#D6D6D6',
borderTopWidth: 1,
borderStyle: 'solid',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7
},
circleContainer: {
position: 'absolute',
zIndex: 2,
bottom: 10,
left: 10,
flexDirection: 'row',
},
listViewContainer: {
position: 'absolute',
zIndex: 10,
top: 0,
right: 0,
justifyContent: 'center'
},
listView: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderTopRightRadius: 3,
backgroundColor: '#000',
paddingVertical: 5,
paddingHorizontal: 10
},
没有键盘的样子:
键盘的样子:
解决方案
在 React Native 中处理切换键盘时的视图行为可能是一件棘手的事情。像这样的问题有多种可能的解决方案,但在这种情况下,解决方案是这样的:
不要style={{height:'100%'}}
在被推高的组件上使用,而是尝试使用Dimensions:
import {Dimensions} from 'react-native';
const { height } = Dimensions.get('window');
并style={{ height }}
在正确的组件中指定。
如果其他人偶然发现这个问题,另一件事可能值得一试:
React Native for Android 在 Android 清单中定义了一些默认设置。如果您不使用 Expo(或 CRNA),您可以AndroidManifest.xml
通过更改windowSoftInputMode
规则来更改键盘的行为。
尝试更改android:windowSoftInputMode="adjustResize"
为android:windowSoftInputMode="adjustPan"
或android:windowSoftInputMode="adjustNothing"
。如果这不能为您提供所需的效果,您可以尝试使用其他一些选项(请参阅此处)。
推荐阅读
- javascript - 使用 Strapi API 生成器更新数组中的对象
- html - 如何在 Hugo 中使用 if else 语句和 CSS
- openmodelica - 让 OpenModelica 运行时遇到问题/错误代码 1
- c# - .net 中的 MongoDB 过滤器查询从 SQL 转换
- kotlin - 掌握 Kotlin 代表的窍门
- sql - Postgresql 排除基于子查询的结果
- javascript - 在 React 中访问第二层数组
- python-3.x - 将数据透视表转换为 Python 数据框
- google-sheets - Google 表格和 ImportXML - 缩小结果范围
- python - Pandas,遍历数据框项并基于列值构建新的数据框