react-native - 我使用 TextInput 时没有出现键盘反应本机

Question

import React from "react";
import { StyleSheet,Text,Image,TextInput,TouchableOpacity, View, Dimensions } from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

export default function login() {
    return (
        <View style={styles.container}>
            <Image source={require('../components/assets/login/logo.jpg')} style={styles.logo} />

            <TextInput style={styles.ButtonEmail} placeholder='Email' />

            <TextInput style={styles.ButtonPassword} placeholder='Password'/>

            <View style={styles.forgotContainer}>
                <TouchableOpacity>
                    <Text style={styles.forgotText}>Esqueceu-se da senha?</Text>
                </TouchableOpacity>
            </View>

            <TouchableOpacity style={styles.ButtonLogin}>
                <Text style={styles.loginText}>Login</Text>
            </TouchableOpacity>

            <View style={styles.divisor}>
                <View style={styles.divisorLine}></View>
                <Text style={{marginHorizontal: '3%'}}>OU</Text>
                <View style={styles.divisorLine}></View>
            </View>

            <TouchableOpacity style={styles.ButtonGoogle}>
                <Text style={styles.GoogleText}>Login com a conta Google</Text>
            </TouchableOpacity>

            <Image source={require('../components/assets/login/google.jpg')} style={styles.logoGoogle} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },

    logo: {
        width: 200,
        height: 200,
        position: 'relative',
        top: height*0.17,
    },

    ButtonEmail: {
        position: 'absolute',
        top: height*0.35,
        height: height*0.08,
        width: width*0.85,
        borderRadius: 50,
        padding: 20,
        backgroundColor: '#D6ECF3',
    },

    ButtonPassword: {
        position: 'absolute',
        top: height*0.45,
        height: height*0.08,
        width: width*0.85,
        borderRadius: 50,
        padding: 20,
        backgroundColor: '#D6ECF3',
    },

    forgotContainer: {
        position: 'absolute',
        left: width*0.55,
        top: height*0.55,
    },

    forgotText: {
        color: '#399fff',
    },

    ButtonLogin: {
        position: 'absolute',
        top: height*0.63,
        height: height*0.08,
        width: width*0.425,
        borderRadius: 50,
        padding: 20,
        backgroundColor: '#399fff',
    },

    loginText: {
        textAlign: 'center',
        color: 'white',
    },

    divisor: {
        position: 'absolute',
        top: height* 0.75,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },

    divisorLine: {
        width: width*0.3,
        height: height*0.005,
        borderRadius: 5,
        backgroundColor: '#EFEDED',
    },

    ButtonGoogle: {
        position: 'absolute',
        top: height*0.8,
        height: height*0.08,
        width: width*0.77,
        borderRadius: 50,
        padding: 20,
        paddingRight: 50,
        backgroundColor: '#399fff',
    },

    GoogleText: {
        textAlign: 'center',
        color: 'white',
    },

    logoGoogle: {
        position: 'absolute',
        top: height*0.82,
        left: width* 0.72,
        height: 30,
        width: 28,
    }
});

标签： react-native