反应本机多行，值，小于TextInput组件中的占位符

Question

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>
        )
    }
}

Answer 1

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.