TextInput Typed Text not appearing on android

问题

I'm new to react-native and am trying to make an app for both android and iOS at the same time.

Currently, I have a login screen set up, but both the typed text and placeholder text used within textInput is not showing in the app for android (works fine for iPhone).

Here is the code snippet and style 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'
    }
})

Any help is appreciated. Thank you.

回答1:

For some reason the height style property needs to be double when on Android than iOS. There might be a cleaner way to do this but here is how we solved this.

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

回答2:

I recently had this issue, and I solved it by adding paddingVertical: 0 to the style of the input and by set underlineColorAndroid="transparent" prop. The style can be same for both platforms this way. It seems like there is some default vertical padding on android.

There is also related issue on the Github of React Native.

回答3:

Another thing to be careful about is in Android, if the TextInput height is set to less than or equal to 20, the cursor and text becomes invisible. They become properly visible on when height is set to greater than or equal to 40.

回答4:

For android it's required to set the correct lineHeight aswell.

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

来源：https://stackoverflow.com/questions/40666795/textinput-typed-text-not-appearing-on-android