Question

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

没有键盘的样子：

键盘的外观如下：

Answer 1

处理切换键盘时的查看行为在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"。您可以尝试使用其他一些选项（See here），如果这不能达到您想要的效果。

Answer 2

对于Android，您应该使用"none"的尝试行为，如果您不想变小，可以在清单文件中设置android:windowSoftInputMode="adjustPan"。

如果仍然面临任何错误检查react-native-keyboard-aware-scrollview {n} here。

Answer 3

我遇到了类似的问题并通过改变解决了这个问题机器人：windowSoftInputMode =＆＃34; adjustPan”

在android清单中。还要清洁和重建。这可能有用

Answer 4

删除绝对职位，请相信我

Answer 5

对于某些情况，如果您想保留默认清单您可以在 Scrollview 内移动元素，这可能会有所帮助。

通过这种方式为我解决了问题

如何强制反应原生内容忽略键盘？

5 个答案: