TextInput输入文字没有出现在android上(TextInput Typed Text not appearing on android)

我是新来的react-native，并且试图同时为android和iOS创建应用程序。

目前，我设置了一个登录屏幕，但textInput中使用的键入文本和占位符文本并未显示在android应用程序中（适用于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' } })

任何帮助表示赞赏。谢谢。

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.

最满意答案

由于某些原因，在Android上iOS版本的height样式属性需要加倍。可能有更干净的方式来做到这一点，但这是我们如何解决这个问题。

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.

更多推荐

style,styles,android,whiteFont,电脑培训,计算机培训,IT培训"/> <meta name=&quo