javascript - React Native 多行，值，小于 TextInput 组件中的占位符

Question

将文本添加到<TextInput>时组件 multiline设置为false value文本匹配 placeholder文本字体大小，而 if multiline等于true ，value文本字体大小小于placeholder字体大小。

这是正常行为还是错误？

编辑:

/* @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

据我所知，多行和非多行 TextInput-s 的默认字体大小实际上是不同的。处理此问题的一种方法是引入另一个组件，该组件充当 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
                ]}
            />
        )
    }
}

现在您可以按照 TextInput 的使用方式使用 AppTextInput，并且与样式输入相关的所有问题都在一个地方得到解决。