what - TextInput Typed Text no aparece en Android

what is html

Question

Soy nuevo en reaccionar nativo y estoy tratando de crear una aplicación para Android y iOS al mismo tiempo.

Actualmente, tengo configurada una pantalla de inicio de sesión, pero tanto el texto escrito como el marcador de posición que se usa en textInput no se muestran en la aplicación para Android (funciona bien para iPhone).

Aquí está el fragmento de código y la hoja de estilo:

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

Cualquier ayuda es apreciada. Gracias.

Answer 1

Por alguna razón, la propiedad de estilo de height debe ser doble cuando está en Android que en iOS. Puede haber una forma más limpia de hacerlo, pero así es como lo resolvimos.

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