如果我点击一个文本输入,我希望能够点击其他地方,以便再次取消键盘(不是返回键)。在我读过的所有教程和博客文章中,我没有发现一丁点关于这方面的信息。
这个基本的例子在模拟器中的react-native 0.4.2中仍然不能为我工作。还不能在我的iPhone上试试。
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onEndEditing={this.clearFocus}
/>
</View>
有很多方法可以处理这个问题,上面的答案不包括returnType,因为它当时不包括在react-native中。
1:你可以通过在ScrollView中包装你的组件来解决这个问题,默认情况下,如果我们按下某个地方,ScrollView会关闭键盘。但如果你想使用ScrollView但禁用此效果。你可以使用pointerEvent道具来scrollView
pointerEvents = 'none'。
2:如果你想关闭键盘按钮按下,你可以使用键盘从反应本机
import {Keyboard} from 'react-native'
在那个按钮的onPress里面,你可以使用keyboard .dismiss()'。
3:你也可以在点击键盘上的返回键时关闭键盘,
注意:如果你的键盘类型是数字,你将没有返回键。
你可以通过给它一个道具returnKeyType来启用它。
或者你可以使用onSubmitEditing={键盘。当我们按回车键时,它就会被调用。如果你想在失去焦点时忽略键盘,你可以使用onBlur prop, onBlur = {keyboard .dismiss}
使用React Native的Keyboard.dismiss()
更新后的答案
React Native在键盘上暴露了静态的dismiss()方法,因此更新的方法是:
import { Keyboard } from 'react-native';
Keyboard.dismiss()
原来的答案
使用React Native的遣散键盘库。
我有一个非常相似的问题,感觉我是唯一一个没有得到它。
ScrollViews
如果你有一个ScrollView,或者任何从它继承的东西,比如ListView,你可以添加一个道具,它会根据按下或拖动事件自动取消键盘。
道具是keyboardDismissMode,值可以为none、interactive或on-drag。你可以在这里阅读更多。
常规的观点
如果你有一个ScrollView以外的东西,你想要任何按键来解除键盘,你可以使用一个简单的TouchableWithoutFeedback,并让onPress使用React Native的实用程序库来解除键盘。
在你的例子中,你可以这样做:
var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library.
// Wrap your view with a TouchableWithoutFeedback component like so.
<View style={styles.container}>
<TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }>
<View>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
</View>
</TouchableWithoutFeedback>
</View>
注意:TouchableWithoutFeedback只能有一个子元素,所以你需要把它下面的所有元素都包装在一个视图中,如上所示。
这是我的解决方案键盘解散和滚动到点击TextInput(我使用的是ScrollView与keyboardDismissMode道具):
import React from 'react';
import {
Platform,
KeyboardAvoidingView,
ScrollView
} from 'react-native';
const DismissKeyboard = ({ children }) => {
const isAndroid = Platform.OS === 'android';
const behavior = isAndroid ? false : 'padding';
return (
<KeyboardAvoidingView
enabled
behavior={ behavior }
style={{ flex: 1}}
>
<ScrollView
keyboardShouldPersistTaps={'always'}
keyboardDismissMode={'on-drag'}
>
{ children }
</ScrollView>
</KeyboardAvoidingView>
);
};
export default DismissKeyboard;
用法:
render(){
return(
<DismissKeyboard>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</DismissKeyboard>
);
}