TextInput键入的文本未出现在android上

Posted 2023-04-18

【中文标题】TextInput键入的文本未出现在android上

【英文标题】：TextInput Typed Text not appearing on android

【发布时间】：2017-04-01 16:44:22

【问题描述】：

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

目前，我设置了登录屏幕，但 textInput 中使用的键入文本和占位符文本均未显示在适用于 android 的应用程序中（适用于 iPhone）。

这里是代码 sn-p 和样式表：

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

感谢任何帮助。谢谢。

【问题讨论】：

虽然不熟悉 react-native 代码，但在白色背景上使用白色文本颜色是初学者的错误，我想将其更改为黑色

@Bali 抱歉，我包含了完整的代码以表明我当前使用的是橙色背景。

【参考方案1】：

由于某种原因，height 在 Android 上的样式属性需要比 iOS 上的两倍。可能有一种更清洁的方法来做到这一点，但这是我们解决这个问题的方法。

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

【参考方案2】：

我最近遇到了这个问题，我通过在输入样式中添加paddingVertical: 0 并设置underlineColorAndroid="transparent" 属性来解决它。通过这种方式，两个平台的样式可以相同。 android 上似乎有一些默认的垂直填充。

React Native 的 Github 上也有相关的issue。

【参考方案3】：

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

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

【参考方案4】：

另外需要注意的是，在 Android 中，如果 TextInput 的高度设置为小于或等于 20，则光标和文本将变得不可见。当高度设置为大于或等于 40 时，它们会正确可见。