Блог

У меня есть экран с несколькими входами. Прямо сейчас, когда я нажимаю один из текстовых вводов, появляется клавиатура, и она закрывает вводы. Я пытался использовать react-native-keyboard-aware-scroll-view его, он очень хорошо работает на iOS, но, к сожалению, на Android ничего не происходит.

В моем AndroidManifest разделе под Activity тегом , который я установил android:windowSoftInputMode="adjustPan" .

Кроме того, это код, который я использую в своем примере:

 class Login extends Component {
    public render() {
        return (
            <KeyboardAwareScrollView
            resetScrollToCoords={{ x: 0, y: 0 }}
            scrollEnabled={false}
            enableOnAndroid
            enableAutomaticScroll={(Platform.OS === 'ios')}
            contentContainerStyle={{flex:1}}
            extraHeight={130}>

                <SafeAreaView style={styles.container}>
                    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                        <View style={styles.inner}>
                            <Text style={styles.header}>
                                Header
                            </Text>
                            <TextInput
                                placeholder="Username"
                                style={styles.input}
                            />
                            <TextInput
                                placeholder="Password"
                                style={styles.input}
                            />
                            <TextInput
                                placeholder="Confrim Password"
                                style={styles.input}
                            />
                            <View style={styles.btnContainer}>
                                <Button title="Submit" onPress={() => null} />
                            </View>
                            {/* <View style={{ flex : 1 }} /> */}
                            <View style={{ height: 60 }} />
                        </View>
                    </TouchableWithoutFeedback>
                </SafeAreaView>
                </KeyboardAwareScrollView>
            // </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    inner: {
        padding: 24,
        flex: 1,
        justifyContent: "flex-end",
    },
    header: {
        fontSize: 36,
        marginBottom: 48,
    },
    input: {
        height: 40,
        borderColor: "#000000",
        borderBottomWidth: 1,
        marginBottom: 36,
    },
    btnContainer: {
        backgroundColor: "white",
        marginTop: 12,
    },
});

export default Login;
 

Я тоже пытался использовать KeyboardAvoidingView .

Моя react-native версия 0.63.3

дайте высоту стилю просмотра безопасной области, используя размеры, это будет работать

 import { Dimensions } from 'react-native';

const window = Dimensions.get('window');

<View style={{ height: (window.height) * 1 }}></View>
 

на ваш вопрос укажите высоту контейнера, как показано ниже,

 container: {
    height: (window.height) * 1
},