使用 react-native 的 Keyboard 模块隐藏键盘。
这是一个类似的问题:detox-how-to-test-multiline-textinput
例子:
import {Keyboard} from 'react-native'
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
Alert,
TouchableWithoutFeedback,
TouchableOpacity,
View,
Text,
TextInput
} from 'react-native'
class example extends Component {
constructor(props) {
super(props)
}
render() {
return (
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
style={styles.container}
>
<View style={styles.form}>
<View style={styles.input}>
<TextInput
testID='input'
style={styles.inputText}
keyboardType="numeric"
/>
</View>
<TouchableOpacity
testID='next'
style={styles.button}
onPress={() => Alert.alert("Button pressed")}
>
<Text>Next</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
form: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
input: {
height: 20,
width: 200,
borderColor: 'gray',
borderWidth: 1
},
inputText: {
flex: 1
},
button: {
margin: 20,
padding: 5,
borderColor: 'gray',
borderWidth: 1
}
})
AppRegistry.registerComponent('example', () => example)
测试:
it('Hide num keyboard', async () => {
const inputElement = element(by.id('input'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('1234567890');
// click somewhere outside the input
await inputElement.tapAtPoint({x: 0, y: -1});
const buttonElement = element(by.id('next'));
await expect(buttonElement).toBeVisible();
await buttonElement.tap();
});
结果: