3
Я новичок в реагировании, и я пытаюсь создать приложение для Android и iOS одновременно.TextInput Typed Текст, не отображающийся на android
В настоящее время у меня установлен экран входа в систему, но как текст, так и текст заполнителя, используемый в 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'
}
})
Любая помощь приветствуется. Спасибо.
не знакомы с кодом на основе реакции, хотя но это ошибка начинающего использовать белый цвет текста на белом фоне, изменить его на черный Я думаю, – Bali
@Bali Извините, я включил полный код, чтобы показать, что в настоящее время я использую оранжевый фон , – Wesley