TextInput dactylographié texte n'apparaissant pas sur android

Question

Je suis nouveau à réagir-natif et je suis en train de faire une application pour Android et iOS en même temps.

Actuellement, j'ai un écran de connexion mis en place, mais le texte tapé et le texte d'espace réservé utilisé dans textInput n'apparaissent pas dans l'application pour android (fonctionne bien pour iPhone).

Voici la feuille extrait de code et de style:

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

Toute aide est appréciée. Je vous remercie.

Answer 1

Pour une raison quelconque, la propriété de style height doit être doublée sur Android que sur iOS. Il pourrait y avoir une manière plus propre de faire ceci mais voici comment nous avons résolu ceci.

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

Answer 2

J'ai eu récemment cette question, et je l'ai résolu en ajoutant paddingVertical: 0 au style de l'entrée et par un jeu underlineColorAndroid="transparent" prop. Le style peut être le même pour les deux plates-formes de cette façon. Il semble qu'il y ait un rembourrage vertical par défaut sur Android.

Il est également apparenté issue sur le Github de React Native.