When adding text into a <TextInput>
component with multiline
set to false
the value
text matches the placeholder
text font size, whereas if multiline
is equal to true
, the value
text font size is smaller than the placeholder
font size.
Is this a normal behaviour or a bug?
Edit:
/* @flow */
import React from 'react'
import Separator from './components/Separator'
import {Button, StyleSheet, TextInput, View} from 'react-native'
const styles = StyleSheet.create({
subject: {
height: 20,
},
body: {
height: 100,
},
})
export default class NewQuestion extends React.Component {
static navigationOptions = ({navigation}) => ({
title: 'AIBU',
headerLeft: (
<Button
onPress={() => {
navigation.goBack()
}}
title="Back"
/>
),
})
state = {
subject: '',
body: '',
}
render() {
return (
<View>
<TextInput
autoFocus
onChangeText={subject => this.setState({subject})}
placeholder="Enter your AIBU subject..."
style={styles.subject}
value={this.state.subject}
/>
<Separator />
<TextInput
multiline
onChangeText={body => this.setState({body})}
placeholder="Enter your AIBU description..."
style={styles.body}
value={this.state.body}
/>
</View>
)
}
}
As far as I see, the default font size is actually different for multiline and non-multiline TextInput
-s. One way to handle this is by introducing another component which acts as an abstraction on top of TextInput
:
const styles = StyleSheet.create({ text: { fontFamily: 'System', fontStyle: 'normal', fontSize: 20, lineHeight: 20, letterSpacing: 0.6 } }) export default class AppTextInput extends Component { static propTypes = { style: TextInput.propTypes.style } static defaultProps = { style: {} } render() { return ( <TextInput {...this.props} style={[ styles.text, this.props.style ]} /> ) } }
Now you can just use AppTextInput
the same way TextInput
is supposed to be used, and all issues related to styling inputs are covered in a single place.
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.