3
私はネイティブに反応して新しく、同時にアンドロイドとiOSの両方のアプリを作成しようとしています。TextInput入力されたテキストがアンドロイドに表示されない
現在、ログイン画面が設定されていますが、textInput内で使用されている入力テキストとプレースホルダテキストの両方がアンドロイド用にアプリケーションに表示されていません。すべてのヘルプは高く評価され
'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