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

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），您可以通过更改 windowSoftInputMode 规则来更改 AndroidManifest.xml 中键盘的行为。

尝试将android:windowSoftInputMode="adjustResize" 更改为android:windowSoftInputMode="adjustPan" 或android:windowSoftInputMode="adjustNothing"。如果这不能给你想要的效果，你可以尝试使用其他一些选项 (See here)。

Answer 2

你应该使用"none" for android的try行为，如果你不想变小，你可以在manifest文件中设置android:windowSoftInputMode="adjustPan"。

如果仍然遇到任何错误检查 react-native-keyboard-aware-scrollview here 在 npm 上。

Answer 3

我遇到了类似的问题并通过更改解决了 android:windowSoftInputMode="adjustPan"

在 android 清单中。 还清理和重建。这可能有效

Answer 4

删除绝对位置，相信我会正常工作

Answer 5

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

以这种方式为我解决了问题