如何在 React Native 上一开始就关闭键盘

Question

我的应用程序第一次打开直接登录页面和键盘自动打开！但我想要的是在开始时键盘关闭位置，但点击任何输入时必须打开键盘。这是我的 login.js 页面

import React, { Component } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import Axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';



import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  ActivityIndicator,
  

} from 'react-native';
import { Container, Header, Content, Form, Item, Input, Button } from 'native-base';
import { set } from 'react-native-reanimated';

export default class Login extends Component {

  render() {

    return (



      <ScrollView contentInsetAdjustmentBehavior="automatic" >
      
        <View style={styles.containerx}>
          <Container style={styles.bigContainer} >


            <Content contentContainerStyle={{ flex: 1, justifyContent: 'center', padding: 30 }}>
              <Image
                source={ require('../assets/icon1024.png') }
                style={{ width: 150, height: 150, alignSelf: 'center', marginBottom: 10 }}
              />

              <Text style={styles.loginText}>KUŞ SOR</Text>
              <Text style={[styles.loginText, { fontSize: 14 }]} >Birdpx Kuş Tanımlama Platformu</Text>
              {
                this.state.loading == true ? <View style={styles.emptyCont}><ActivityIndicator size='large' color='white' /></View> :
                  <Formik
                    initialValues={{username: '', password: ''}}
                    onSubmit={this._handleSubmit}
                    validationSchema={
                      Yup.object().shape({
                        password: Yup.string().min(6, 'Minimim 6 Karakter').required('Bu Alan Zorunludur'),
                        username: Yup.string().required('Bu Alan Zorunludur'),

                      })
                    }
                  >
                    {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
                      <Form>

                        <Item>
                          <Input
                             onChangeText={handleChange('username')}
                             onBlur={handleBlur('username')}
                            placeholder="Kullanıcı Adı"
                            style={{ color: 'white' }}
                            autoCapitalize={'none'}
                            value={values.username}
                            autoFocus={true}
                          />
                          <Text style={styles.errorStyle}>{errors.username}</Text>
                        </Item>

                        <Item>
                          <Input
                           onChangeText={handleChange('password')}
                           onBlur={handleBlur('password')}
                           style={{ color: 'white' }}
                            secureTextEntry={true}
                            placeholder="Şifre"
                            value={values.password} />
                            <Text style={styles.errorStyle}>{errors.password}</Text>

                        </Item>

                        <Button style={{ alignSelf: 'center', marginTop: 20, padding: 10 }} warning
                          block
                          onPress={handleSubmit}
                        >
                          <Text style={{ textAlign: 'center', justifyContent: 'center' }} > GİRİŞ YAP </Text>
                        </Button>


                        <View>
                          <Text
                            style={{ textAlign: 'center', justifyContent: 'center', color: '#999', marginTop: 150 }}
                            onPress={() => this.props.navigation.navigate('FSignup')}
                          >Henüz üye değilseniz. Buradan Kayıt Olun</Text>
                        </View>

                      </Form>
                    )}
                  </Formik>
              }
            </Content>

          </Container>
        </View>
     
      </ScrollView>





    );

  };
};

const styles = StyleSheet.create({
  bigContainer: {
    backgroundColor: 'black',
    flex: 1,

  },
  containerx: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    width:'100%'
  },

  loginText: {
    color: '#c79816',
    fontSize: 20,
    alignSelf: 'center',
    margin: 7,
    fontWeight: "700"
  },
  emptyCont: {
    flex: 1,
    height: 100,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  errorStyle: {
 
    fontSize: 15,
    color: 'red'
},



});

在 react native 中尝试了 keyboardAvoidingView 元素，但我无法获得好的结果 你能帮帮我吗？

Answer 1

在这种情况下，您必须手动关闭它，要么将输入 autoFocus 放入 false，要么使用手动 react-native Keyboard 处理程序，如下所示：

import {Keyboard} from 'react-native'

现在，当组件挂载时，我们将关闭键盘。

componentDidMount(){
Keyboard.dismiss();
}