728x90
반응형
import React,{Component} from 'react';
import {View,Text,StyleSheet,TextInput} from 'react-native'
class login extends Component{
static navigationOptions = {
headerShown:false
}
constructor(){
super();
this.state = { hidePassword: true }
}
render() {
return (
<View style={styles.loginMainContainer}>
<View style={styles.imageBox}></View>
<TextInput style={[styles.input]}
placeholder='userName'
>
</TextInput>
<TextInput style={styles.input}
placeholder='passWord'
secureTextEntry = { this.state.hidePassword }
>
</TextInput>
</View>
)
}
}
const styles = StyleSheet.create({
loginMainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
imageBox:{
width: 200,
height:200,
backgroundColor:'gray'
},
input: {
height: 44,
backgroundColor: '#ededed',
borderColor: '#ddd',
borderWidth: 1,
borderRadius: 10,
marginTop:20,
marginRight:40,
marginLeft:40,
alignSelf:'stretch',
textAlign:'center'
}
})
export default login
constructor(){
super();
this.state = { hidePassword: true }
}
<TextInput style={styles.input}
placeholder='passWord'
secureTextEntry = { this.state.hidePassword }
>
TextInput>
728x90
반응형
'React Native' 카테고리의 다른 글
React native 지오로케이션 GeoLocation (0) | 2020.01.16 |
---|---|
ReactNative 에서 android 퍼미션 요청 하기 (1) | 2020.01.16 |
리엑트 네이티브 SwitchNavigator 사용 하기 (0) | 2020.01.15 |
4. 여러개 StyleSheet 적용하는 방법 (0) | 2020.01.08 |
시작 컴포넌트 바꾸기. 앱의 진입점 바꾸기. (0) | 2020.01.07 |