android 上未出现 TextInput 键入的文本

Question

我是 react-native 的新手，我正在尝试同时为 android 和 iOS 制作一个应用程序。

目前，我设置了登录屏幕，但 textInput 中使用的键入文本和占位符文本都没有显示在 android 的应用程序中（在 iPhone 时工作正常）。

这里是代码片段和样式sheet:

    'use strict';
import React, { Component } from 'react'
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');

import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TextInput,
  Image
} from 'react-native';

class LoginPage extends Component {
  constructor() {
    super()
    this.state = {
        username: '',
        password: ''
    }
  }
  render() {
    return (
        <View style={styles.container}>
            <Image style={styles.bg} source={require('./Resources/orangebackground.png')} />
            <View style={styles.header}>
                <Image source={require('./Resources/logo.png')} />
            </View>
            <View style={styles.inputs}>
                <View style={styles.inputContainer}>
                    <Image style={styles.inputUsername} source={require('./Resources/un.png')}/>
                    <TextInput 
                        style={[styles.input, styles.whiteFont]}
                        underlineColorAndroid={'white'}
                        placeholder='Username'
                        placeholderTextColor="white"
                        //value={this.state.username}
                    />
                </View>
                <View style={styles.inputContainer}>
                    <Image style={styles.inputPassword} source={require('./Resources/pw.png')}/>
                    <TextInput
                        password={true}
                        style={[styles.input, styles.whiteFont]}
                        placeholder="Password"
                        placeholderTextColor="#FFF"
                        underlineColorAndroid={'transparent'}
                        //value={this.state.password}
                    />
                </View>
                <View style={styles.forgotContainer}>
                    <Text style={styles.greyFont}>Forgot Password</Text>
                </View>
            </View>
            <View style={styles.signin}>
                <Text style={styles.whiteFont}>Sign In</Text>
            </View>
            <View style={styles.signup}>
                <Text style={styles.greyFont}>Don't have an account?<Text style={styles.whiteFont}>  Sign Up</Text></Text>
            </View>
        </View>
    );
  }
}

var styles = StyleSheet.create({
    container: {
      flexDirection: 'column',
      flex: 1,
      backgroundColor: 'transparent'
    },
    bg: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: windowSize.width,
        height: windowSize.height
    },
    header: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: .5,
        backgroundColor: 'transparent'
    },
    mark: {
        width: 150,
        height: 150
    },
    signin: {
        backgroundColor: '#FF3366',
        padding: 20,
        alignItems: 'center'
    },
    signup: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: .15
    },
    inputs: {
        marginTop: 10,
        marginBottom: 10,
        flex: .25
    },
    inputPassword: {
        marginLeft: 15,
        width: 20,
        height: 21
    },
    inputUsername: {
      marginLeft: 15,
      width: 20,
      height: 20
    },
    inputContainer: {
        padding: 10,
        borderWidth: 1,
        borderBottomColor: '#CCC',
        borderColor: 'transparent'
    },
    input: {
        position: 'absolute',
        left: 61,
        top: 12,
        right: 0,
        height: 20,
        fontSize: 14
    },
    forgotContainer: {
      alignItems: 'flex-end',
      padding: 15,
    },
    greyFont: {
      color: '#D8D8D8'
    },
    whiteFont: {
      color: '#FFF'
    }
})

感谢任何帮助。谢谢。

Answer 1

出于某种原因，height 样式属性在 Android 上需要比 iOS 翻倍。可能有更简洁的方法来执行此操作，但这是我们解决此问题的方法。

<TextInput style={[styles.input, {height: Platform.OS == 'android' ? 40 : 20}]} ... />

Answer 2

我最近遇到了这个问题，我通过在输入样式中添加 paddingVertical: 0 和设置 underlineColorAndroid="transparent" prop 来解决它。这样两个平台的样式可以相同。 android.

上似乎有一些默认的垂直填充

React Native的Github上也有相关的issue

Answer 3

还有一个需要注意的地方是Android，如果TextInput的高度设置为小于等于20，光标和文字就会变得不可见。当高度设置为大于或等于 40 时，它们会正确显示。

Answer 4

对于android，还需要设置正确的行高。

input: {
  position: 'absolute',
  left: 61,
  top: 12,
  right: 0,
  height: 20,
  fontSize: 14,
  lineHeight: 14 // <- line height should be corresponding to your font size
},

android 上未出现 TextInput 键入的文本

TextInput Typed Text not appearing on android

android

textinput

react-native