React Native 간단한 로그인 기능 구현(추천)

React Native 소개:

React Native는 웹 애플리케이션과 네이티브 애플리케이션의 장점을 결합하여 JavaScript를 사용하여 iOS와 Android 원생 애플리케이션을 개발할 수 있습니다. JavaScript에서 React를 사용하여 운영체제의 원생 UI 컴포넌트를 추상화하고, DOM 요소를 대체하여 렌더링하는 등을 합니다.

React Native는 JavaScript와 React와 일관된 개발 경험을 통해 로컬 플랫폼에서 세계적인 애플리케이션 경험을 구축할 수 있게 합니다. React Native는 모든 개발자가 중요하게 생각하는 플랫폼 개발 효율성에 중점을 둡니다—개발자는 단 한 가지 언어만 배웠을 뿐만 아니라, 어떤 플랫폼에서도 효율적으로 코드를 작성할 수 있습니다. Facebook은 여러 애플리케이션 제품에서 React Native를 사용하며, 계속해서 React Native에 투자할 예정입니다。

学习React Native也有2个月了，从最开始的页面到点点击事件，到调用接口大体都会了，今天实现一个简单的登录功能。

这里需要说明几点：

1、<TextInput>组件在React Native中，默认是带一条横线的，如果想去掉输入框下面的横线，需要给<TextInput>指定一个underlineColorAndroid='transparent'，这样就可以去掉输入框下面的横线了；

2、密码输入框需要指定属性：secureTextEntry={true}

3、要显示图片，必须为<Image>标签指定宽度和高度，和Android中不同的是，<Image>没法自动调整图片的大小，没有类似Android中的wrap_content。

代码如下：

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 
import React, {Component} from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
Image, 
View, 
TextInput 
} from 'react-native'; 
class ReactDemo extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<View style={styles.header}> 
<Text style={styles.headtitle}>添加账号</Text>/Text> 
</View> 
<View style={styles.marginTopview}>/> 
<View style={styles.inputview}> 
<TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='QQ 번호}}/휴대폰 번호/이메일/> 
<View style={styles.dividerview}> 
<Text style={styles.divider}></Text> 
</View> 
<TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='비밀번호' 
secureTextEntry={true}/> 
</View> 
<View style={styles.bottomview}> 
<View style={styles.buttonview}> 
<Text style={styles.logintext}>로그인</Text> 
</View> 
<View style={styles.bottombtnsview}> 
<View style={styles.bottomleftbtnview}> 
<Text style={styles.bottombtn}>로그인할 수 없으신가요?</Text> 
</View> 
<View style={styles.bottomrightbtnview}> 
<Text style={styles.bottombtn}>신규 사용자</Text> 
</View> 
</View> 
</View> 
</View> 
}); 
} 
} 
const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: '#FFFFFF' 
}, 
header: { 
height: 50, 
backgroundColor: '#12B7F5', 
justifyContent: 'center', 
}, 
headtitle: { 
alignSelf: 'center', 
fontSize: 20, 
color: '#ffffff', 
}, 
avatarview: { 
height: 150, 
backgroundColor: '#ECEDF',1', 
justifyContent: 'center', 
}, 
avatarimage: { 
width: 100, 
height: 100, 
alignSelf: 'center', 
}, 
marginTopview: { 
height: 15, 
backgroundColor: '#F',7F7F9 
}, 
inputview: { 
height: 100, 
}, 
textinput: { 
flex: 1, 
fontSize: 16, 
}, 
dividerview: { 
flexDirection: 'row', 
}, 
divider: { 
flex: 1, 
height: 1, 
backgroundColor: '#ECEDF',1 
}, 
bottomview: { 
backgroundColor: '#ECEDF',1', 
flex: 1, 
}, 
buttonview: { 
backgroundColor: '#1DBAF1', 
margin: 10, 
borderRadius: 6, 
justifyContent: 'center', 
alignItems: 'center', 
}, 
logintext: { 
fontSize: 17, 
color: '#FFFFFF', 
marginTop: 10, 
marginBottom: 10, 
}, 
emptyview: { 
flex: 1, 
}, 
bottombtnsview: { 
flexDirection: 'row', 
}, 
bottomleftbtnview: { 
flex: 1, 
height: 50, 
paddingLeft: 10, 
alignItems: 'flex-start', 
justifyContent: 'center', 
}, 
bottomrightbtnview: { 
flex: 1, 
height: 50, 
paddingRight: 10, 
alignItems: 'flex-end', 
justifyContent: 'center', 
}, 
bottombtn: { 
fontSize: 15, 
color: '#1DBAF1', 
} 
}); 
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

이제小编이 여러분께 소개한 React Native 로그인 기능을 통해 도움이 되었기를 바랍니다. 만약 여러분이 어떤 질문이나 의문이 있으시면,小编이 즉시 답변 드리겠습니다. 또한, 양해해 주셔서 감사합니다. 또한, 양해해 주셔서 감사합니다.

공지: 본 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 문제가 있을 경우 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 이메일을 보내면(#을 @으로 변경하여 보내세요) 신고하시고 관련 증거를 제공하시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제하겠습니다.