我已经尝试使用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
},
没有键盘时的样子:
键盘的样子:
6条答案
按热度按时间zed5wv101#
在React Native中,切换键盘时处理View行为可能是一件棘手的事情。对于这样的问题有多种可能的解决方案,但在这种情况下,解决方案是这样的:
不要在被向上推的组件上使用
style={{height:'100%'}}
,而是尝试使用Dimensions:并在右侧组件中指定
style={{ height }}
。如果其他人在这个问题上绊倒了,另一件值得一试的事情是:
React Native for Android在Android清单中定义了一些默认设置。如果您没有使用Expo(或CRNA),您可以通过更改
windowSoftInputMode
规则来更改AndroidManifest.xml
中键盘的行为。尝试将
android:windowSoftInputMode="adjustResize"
更改为android:windowSoftInputMode="adjustPan"
或android:windowSoftInputMode="adjustNothing"
。如果这不能给予你想要的效果,你可以尝试使用其他选项(见这里)。wfypjpf42#
你应该使用try行为作为
"none"
for android,如果你不想变小,你可以在manifest文件中设置android:windowSoftInputMode="adjustPan"
。如果仍然面临任何错误,请在npm上检查react-native-keyboard-aware-scrollview here。
yhived7q3#
我经历了一个类似的问题,并通过更改android解决了它:windowSoftInputMode=“adjustPan”
在android manifest中。清理和重建。这个可能有用
z3yyvxxp4#
删除的立场绝对会工作得很好相信我
xoefb8l85#
在某些情况下,如果你想保留默认清单,你可以在滚动视图中移动你的元素,这可能会有所帮助。
这样就解决了我的问题
cotxawn76#
对要显示的元素使用zIndex