I have a TextInput component in react native
<TextInput
style={styles.searchBar}
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
placeholder='Search State'
/>
This is working perfectly fine in android, but Textbox is not showing in iOS app. And, there is no what to find what the issue is.
Can anybody help with this issue ?
Here is a code sample that demonstrates the need to provide a height for the TextInput
component on iOS. It's not explicitly stated in the docs but reviewing it closely you'll notice the iOS section of the code samples provides a height while the android samples do not. Here is a complete code sample that displays a TextInput
in the center of the view:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View
} from 'react-native';
class MyApp extends Component {
constructor (props) {
super(props);
this.state = {
searchText: ''
};
}
setSearchText (e) {
this.setState({
searchText: e.target.value
});
}
render () {
return (
<View style={styles.container}>
<TextInput
style={styles.searchBar}
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
placeholder='Search State'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
searchBar: {
borderWidth: 1,
height: 40
}
});
AppRegistry.registerComponent('MyApp', () => MyApp);
If this doesn't help as a sanity check in debugging your code, please post the style definition ( styles.searchBar
) you have configured for your TextInput
so we can give that a better test.
你应该给textinput高度和宽度显示textinput为:
<Textinput style={{height:200, width:300}}/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.