React Native -有没有办法完全隐藏键盘？
React Native是一种用于构建跨平台移动应用程序的开发框架。在React Native中，可以通过一些方法来完全隐藏键盘。
- 使用TextInput组件的blur方法：可以在用户完成输入后调用该方法来隐藏键盘。例如：
<TextInput
onBlur={() => Keyboard.dismiss()}
/>- 使用Keyboard组件的dismiss方法：可以在任何需要隐藏键盘的地方调用该方法。例如：
import { Keyboard } from 'react-native';
Keyboard.dismiss();- 使用TouchableWithoutFeedback组件：可以在用户点击屏幕其他区域时隐藏键盘。例如：
import { TouchableWithoutFeedback, Keyboard } from 'react-native';
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View>
{/* 其他组件 */}
</View>
</TouchableWithoutFeedback>这些方法可以在React Native应用程序中实现完全隐藏键盘的效果。
React Native相关产品和产品介绍链接地址：
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mps
- 腾讯云移动直播：https://cloud.tencent.com/product/mlvb
- 腾讯云移动推送：https://cloud.tencent.com/product/tpns
- 腾讯云移动分析：https://cloud.tencent.com/product/mta
- 腾讯云移动测试：https://cloud.tencent.com/product/mst
- 腾讯云移动应用安全：https://cloud.tencent.com/product/mas
相关·内容
我有<TextInput/>，我想在<TextInput/>之外点击的时候模糊它并切换键盘，我已经尝试过解决方案，但没有任何运气。
import React, { Component } from 'react'; import { AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View, Image, TextInput, ScrollView, Keyboard, TouchableWithoutFeedback } from 'react-native'
浏览 1提问于2018-05-07得票数 2
回答已采纳
KeyboardAvoidingView在从虚拟键盘中选择TextInput UI时覆盖TextInputUI。
下面是一个示例代码，在本例中，KeyboardAvoidingView可以很好地从虚拟键盘输入文本。然而，在切换到虚拟键盘中的表情符号选择器时，自动调整的padding | height没有任何效果，TextInput被覆盖在虚拟键盘下。
import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text,,TouchableWithoutFeedba
浏览 2提问于2022-05-15得票数 2
我想通过this.props.navigation.navigate('Second Screen')从一个屏幕导航到另一个屏幕，但是属性“导航”并不包含在道具中。获取错误:在' Readonly<{ }> &Readonly<{子>？：ReactNode；}>类型上不存在属性‘导航’
import React, { Component } from "react";
import styles from "./style";
import { Keyboard, Text, View, TextI
浏览 0提问于2019-07-04得票数 1
回答已采纳
当输入字段被按下时，我想显示我的自定义键盘组件。我想完全防止系统默认键盘被触发。 我曾尝试关闭onFocus上的键盘，但这会触发键盘，然后关闭键盘。 <TextInput
placeholder="type here"
onFocus={Keyboard.dismiss}
/> 我已经厌倦了在TouchableWithoutFeedback中包装TextInput，但是这个解决方案不起作用。 <TouchableWithoutFeedback
onPress={() => Keyboard.dismiss()}
浏览 40提问于2019-12-31得票数 3
回答已采纳
2回答
所以我在youtube上关注了关于react原生的Academind教程，但我似乎不能开始在两个组件之间传递值。在startgamescreen的这一行onPress={()=>props.onGame(selNumber)}上，我似乎跟随他并传递了selNumber，但我得到的错误是onGame不是一个函数，并且未定义，并且在App.js中 const gameHandler=(selNum)=>{
setUserNumber(selNum);
};
let content=<StartGameScreen onGame={gameHandler} />
浏览 6提问于2020-05-01得票数 0
回答已采纳
我正在制作一个应用程序，使用的是react本地expo-cli v-45.0.0，我使用的是库""："^0.9.5“。我这样做是为了实现以下情况:当我专注于文本输入时，我希望我的屏幕滚动到输入字段，而键盘不锁定屏幕，另外，如果我按下屏幕上的任何位置，我需要键盘消失。问题是，有时当我使用这个实现进入屏幕时，它会崩溃，而我得到的消息未定义为对象(计算'_this‘)。滚动=参‘)。
这是我的密码。
import {
KeyboardAvoidingView,
TouchableWithoutFeedback,
Keyboard
} f
浏览 5提问于2022-06-16得票数 0
我正在使用expo开发一个react原生应用程序。 在我的signIn屏幕上，我有两个TextInputs (带有textContentType用户名和密码)。我确实有多个地方在调用Keyboard.dismiss() (从包装触摸屏，从其他按钮等)。这对大多数用例都很好。 我的问题是，在我成功地在iOS上使用密码自动填充(通过指纹)后，键盘首先会自动隐藏和重新显示(触发所有常见的键盘事件)，这看起来很奇怪，但这是可以接受的，但之后键盘不再对任何Keyboard.dismiss()调用做出反应，直到我聚焦另一个TextInput。 “使用强密码”键盘覆盖似乎也有类似的问题。 以下是我的版本：
浏览 61提问于2020-01-16得票数 2
回答已采纳
当我在安卓系统上试用和rotation应用程序和npm create-react-native-app时，我注意到在设备旋转之后出现了一种奇怪的行为。
当我以纵向模式启动应用程序，然后切换到景观，KeyboardAvoidingView周期之间的，没有被推高在所有或没有被推到足够高时，点击TextInput。另外，当隐藏键盘时，按钮每隔一秒钟就隐藏一次。
当我在景观模式下启动应用程序，然后切换到肖像时，KeyboardAvoidingView总是被推到更高的位置。
下面是一个简短的剪辑，展示了发生了什么：
怎样才能防止这种情况发生呢？
下面是我为create-react-nat
浏览 14提问于2022-03-12得票数 1
回答已采纳
我正在使用React native和Firebase创建一个简单的聊天应用程序。但是我无法使用sendMessage函数发送我想要添加到数据库中的数据。我收到类似这样的错误，并且找不到解决方案。你能帮帮我吗?我找不到addDoc ()的位置，也不知道SyntheticObject是什么意思。我有一个这样的问题，尽管我不完全遵守我跟随项目的教程视频中所说的。
错误图像：错误:函数addDoc()数据无效。
import React, {useLayoutEffect, useState} from 'react'
import { TouchableOpacity } from
浏览 11提问于2021-05-26得票数 0
回答已采纳
我有一个多输入的屏幕。现在，当我按下其中一个文本输入时，键盘出现了，它覆盖了输入。我试着使用react-native-keyboard-aware-scroll-view，它在iOS上运行得很好，但不幸的是，在Android上什么也没有发生。
在我的AndroidManifest中的Activity标签下，我设置了android:windowSoftInputMode="adjustPan"。
这也是我在我的示例中使用的代码：
class Login extends Component {
public render() {
return (
浏览 1提问于2020-12-27得票数 0
嗨，我在使用多个输入时遇到了KeyboardAvoidingView的问题：
import React from 'react';
import {
View,
KeyboardAvoidingView,
TextInput,
StyleSheet,
Text,
Platform,
TouchableWithoutFeedback,
Button,
Keyboard
} from 'react-native';
const KeyboardAvoidingComponent = () =&
浏览 3提问于2021-09-23得票数 0
回答已采纳
我正在使用react native和expo。我在屏幕上有一些json数据(similator iOS)，比如
A
Acompany
B
Bcompany
这里A是符号，A公司是名称
当用户点击它时，它应该重定向到另一个屏幕，如(Stock.js)，并传递symbol？当用户单击它并发送此数据(symbol)时，我如何将其重定向到另一个屏幕？
我的代码：
import React, { useState, useEffect } from "react";
import {
StyleSheet,
View,
TouchableWithoutFeedback,
浏览 8提问于2020-06-09得票数 0
回答已采纳
我正在制作一个搜索栏，我希望一旦搜索按钮被点击，键盘就会打开，但是TextInput的autoFocus属性不起作用。我做错了什么？ 代码如下： const SearchBar = () => {
return (
<View style={{ flex: 1 }}>
<TextInput placeholder="Search"
style={{ width: Dimensions.get('screen').width, height: 50, bord
浏览 23提问于2021-08-12得票数 0
1回答
我正在构建一个数字文本输入矩阵，由于数字键盘没有返回或Next按钮，我遇到了很多麻烦。此外，数字键盘缺少一个Done条，所以我不得不使用TouchableWithoutFeedback组件来处理它。
我想知道是否有一种建议的方法可以无缝地将许多数字输入到一个反应本机TextInput**s?**的矩阵中。
下面是我的代码，我对容器进行了着色，以帮助绘制应用程序。
import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, Keyboar
浏览 3提问于2017-04-26得票数 1
我有一些从api获取的json数据，并根据用户输入显示在iOS模拟器上。
在屏幕顶部有一个搜索栏，用户可以在其中键入任何符号值，它应该在屏幕上显示该特定的值。
我的json数据：
Object {
"name": "Chesapeake Energy",
"symbol": "CHK",
},
Object {
"name": "C. H. Robinson Worldwide",
"symbol": "CHRW",
},
浏览 0提问于2020-06-09得票数 2
我无法在IOS模拟器中弹出键盘。如果你想仔细看看，我有视频链接。在android上，这一切都很好。以下是视频的链接：https://youtu.be/JKfPlXFvP6Q 以下是Startgamescreen.js的代码 import React, { useState } from 'react';
import {
View,
Text,
StyleSheet,
Button,
TouchableWithoutFeedback,
Keyboard
} from 'react-native';
import Card fr
浏览 145提问于2020-01-02得票数 0
下面是亚历克斯·麦克米伦的Udemy COurse关于react本机的这个模块：
在第65模块中，我得到了以下错误：
import React, { useState } from "react";
import {
View,
StyleSheet,
Text,
TouchableWithoutFeedback,
Keyboard,
Dimensions,
Alert,
TouchableOpacity,
} from "react-native";
import Card from
浏览 0提问于2020-02-18得票数 0
回答已采纳
嗨，当用户点击用户的图片时，我正在尝试转到配置文件页面。当我使用onPress和navigation.navigate时，会得到一个错误。
这是App.js结构，非常简单，只有两个屏幕。
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNa
浏览 1提问于2020-01-26得票数 0
2回答
当我试图在React Native中添加到数组的开头时，我得到了以下错误： TypeError: todos.unshift is not a function. (In 'todos.unshift(newTodo)', 'todos.unshift' is undefined) 我的代码是： export default function App() {
const [todos, setTodos] = useState(['Hello']);
const [todo, setTodo] = useState(''
浏览 177提问于2021-11-08得票数 0
回答已采纳
我用的是反应本土化和世博会。我在屏幕(iOS)模拟器上有一些从API获取的JSON数据。在顶部，我有一个搜索栏，用户可以在其中搜索屏幕上显示的数据。
例如，如果数据是
一个
一家公司
B
bcompany
A是公司的符号，a company是符号名。因此，当用户类型A时，它应该显示A公司，如果用户类型为Z，则应该显示Z公司。
我的代码：
import React, { useState, useEffect } from "react";
import {
StyleSheet,
View,
TouchableWithoutFeedback,
Keyboard,
浏览 1提问于2020-06-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
