因此,当使用multiline=true的文本输入时,我遇到了这样一个问题:文本垂直居中,而不是被推到顶部.

这个问题在ios和android上都会发生,除了android还有一个问题,即当输入多行时,它们的字母框高度为1行.

我想指出,我已经try 在文本输入的样式中添加textAlignVertical: 'top'

代码:(我把它作为一个单独的组件,因为我在带有表单文本的表单中使用它,但所有参数都被传递了)

    <TextInput
            style={styles.input}
            value={value}
            autoComplete={autoComplete}
            autoCapitalize={autoCapitalize}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
            keyboardType={keyboardType}
            returnKeyType={returnKeyType}
            autoFocus={autoFocus}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            multiline={multiline || false}
            ref={(r) => { inputRef && inputRef(r); }}
    />

风格:

input: {
    paddingRight: 10,
    lineHeight: 23,
    flex: 2,
    textAlignVertical: 'top'
},

ios screenshot

android screenshot

推荐答案

结果显示,围绕文本输入的视图有alignItems: 'center'个字符

所以改成了alignItems: this.multiline ? 'flex-start' : 'center',

同样对于安卓系统的问题,我不得不添加numberOfLines={5},这修复了字母盒

React-native相关问答推荐

@react-native-community/cli-platform-ios/native_modules' 来自哪里?

用图像 react native 动画进度条

我应该什么时候调用 realm.close()?

在 ReactNative 中调用 RCTDeviceEventEmitter.emit 时出错

React.js - 为所有组件方法使用属性初始化器

React Native 入门元素Bundle 失败,出现 Unexpected Token 错误

TouchableOpacity 作为 ListView 中的 Item 仅在 TextInput 失go 焦点后做出响应

submit提交后如何让 React Native TextInput 保持焦点?

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

React Native:双击退出应用程序

在 React Native 中仅显示第一行文本

使用 React Navigation 制作离开屏幕的动画

试图注册两个具有相同名称 ProgressBarAndroid 的视图

try 在 Android 上运行我的 React Native 应用程序时出错

加载远程图像失败后加载本map像

如何在 React Native Android 中设置按钮的高度

ENOENT: no such file or directory, 打开 'android/app/src/main/assets/index.android.bundle'

React-native:图像未显示在 android 设备中,但在模拟器中完美显示

更改导航标题背景 colored颜色

如何设置样式属性以填充剩余空间?