reactjs 如何强制react本地内容忽略键盘?

fnatzsnv  于 2023-05-17  发布在  React
关注(0)|答案(6)|浏览(175)

我已经尝试使用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
    },

没有键盘时的样子:

键盘的样子:

zed5wv10

zed5wv101#

在React Native中,切换键盘时处理View行为可能是一件棘手的事情。对于这样的问题有多种可能的解决方案,但在这种情况下,解决方案是这样的:
不要在被向上推的组件上使用style={{height:'100%'}},而是尝试使用Dimensions:

import {Dimensions} from 'react-native'; 
const { height } = Dimensions.get('window');

并在右侧组件中指定style={{ height }}
如果其他人在这个问题上绊倒了,另一件值得一试的事情是:
React Native for Android在Android清单中定义了一些默认设置。如果您没有使用Expo(或CRNA),您可以通过更改windowSoftInputMode规则来更改AndroidManifest.xml中键盘的行为。
尝试将android:windowSoftInputMode="adjustResize"更改为android:windowSoftInputMode="adjustPan"android:windowSoftInputMode="adjustNothing"。如果这不能给予你想要的效果,你可以尝试使用其他选项(见这里)。

wfypjpf4

wfypjpf42#

你应该使用try行为作为"none" for android,如果你不想变小,你可以在manifest文件中设置android:windowSoftInputMode="adjustPan"
如果仍然面临任何错误,请在npm上检查react-native-keyboard-aware-scrollview here

yhived7q

yhived7q3#

我经历了一个类似的问题,并通过更改android解决了它:windowSoftInputMode=“adjustPan”
在android manifest中。清理和重建。这个可能有用

z3yyvxxp

z3yyvxxp4#

删除的立场绝对会工作得很好相信我

xoefb8l8

xoefb8l85#

在某些情况下,如果你想保留默认清单,你可以在滚动视图中移动你的元素,这可能会有所帮助。
这样就解决了我的问题

cotxawn7

cotxawn76#

对要显示的元素使用zIndex

相关问题