[英]There is an issue for using TextInput on android in react native
I have a issue for using the TextInput on android in react native I have use following code. 我在使用React本机在android上使用TextInput时遇到问题,我使用了以下代码。
export default class App extends Component { render() { return ( 导出默认类的App扩展了Component {render(){return(
</View>
);
} } }}
then screen is follow: 然后屏幕如下:
screenshot before tap TextInput 点击TextInput之前的屏幕截图
When I tap TextInput view then screen is comes up like using keyboardavoidingview. 当我点击TextInput视图时,屏幕出现,就像使用keyboardavoidingview一样。
screenshot after tap TextInput 点击TextInput后的屏幕截图
it's on android, but on ios there is no any effect. 它在android上,但是在ios上没有任何作用。 I have no use any other component. 我没有使用任何其他组件。
My package.json is following: 我的package.json如下:
{
"name": "example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.1",
"react-native": "0.57.7",
"react-native-gesture-handler": "^1.0.10",
"react-native-indicators": "^0.13.0",
"react-native-maps": "^0.22.1",
"react-native-maps-directions": "^1.6.0",
"react-native-modal": "^7.0.1",
"react-navigation": "^3.0.4"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.50.0",
"react-test-renderer": "16.6.1"
},
"jest": {
"preset": "react-native"
}
}
On Android why there is an effect like as using KeyboardAvoidingView although I never use that component? 在Android上,尽管我从未使用过该组件,但为什么会有类似使用KeyboardAvoidingView的效果? And why it is ok on ios? 为什么在ios上还可以呢? I'm very happy to hear your advance. 听到您的进步我感到非常高兴。 Thanks. 谢谢。
Whenever you use TextInput
it is recommended you use a Scrollview
as a parent view of it with a prop keyboardShouldPersistTaps="always"
. 每当您使用TextInput
,建议您将Scrollview
用作它的父视图,并带有prop keyboardShouldPersistTaps="always"
。 This will create uniformity whenever keyboard pops up. 每当键盘弹出时,这将创建均匀性。
Edited : 编辑:
<View style={{flex:1}}>
<ScrollView keyboardShouldPersistTaps="always">
<View style={{paddingTop:20}}> //Inside ScrollView flex doesn't work so use padding to control spacing
// Add your <TextInput> Tag here !!
</View>
</ScrollView>
</View>
I Hope I could help you. 希望可以为您服务。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.