TextInput类型的文本未出现在android上 [英] TextInput Typed Text not appearing on android
本文介绍了TextInput类型的文本未出现在android上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是本机反应的新手,正在尝试同时为android和iOS制作一个应用程序.
I'm new to react-native and am trying to make an app for both android and iOS at the same time.
当前,我已经设置了登录屏幕,但是textInput中使用的键入文本和占位符文本均未显示在android应用中(在iPhone上运行正常).
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).
这是代码段和样式表:
'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'
}
})
感谢您的帮助.谢谢.
推荐答案
由于某些原因,Android上的 height
样式属性需要比iOS变倍.可能会有一种更清洁的方法来执行此操作,但这是我们解决此问题的方法.
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}]} ... />
这篇关于TextInput类型的文本未出现在android上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文