React native to achieve simple login (recommended) _javascript tips

React Native Introduction:

React Native combines the advantages of WEB applications and Native applications, you can use JavaScript to develop IOS and Android native applications. In JavaScript, use react abstract operating system native UI components, instead of DOM elements to render and so on.

React Native enables you to build a world-class application experience on your local platform using a consistent development experience based on JavaScript and react. React Native focuses on the development efficiency of the platforms that all developers care about--developers can easily write code for any platform with the ability to learn only one language. Facebook has used react Native in multiple application offerings and will continue to invest in react Native.

Learning react native also has 2 months, from the beginning of the page to click event, to call the interface will be generally, today to achieve a simple login function.

Here are a few points to note:

1, <TextInput> components in the react native, the default is with a horizontal line, if you want to remove the line below the input box, you need to give <TextInput> specify a underlinecolorandroid= ' Transparent ', so you can remove the horizontal line below the input box;

2, the Password input box needs to specify the attribute: Securetextentry={true}

3. To display the picture, you must specify the width and height for the <Image> label, unlike Android,,<image> cannot automatically resize the picture, and there is no wrap_content like Android.

The code is as follows:

/ **
* 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}> Add account </ Text>
</ View>
<View style = {styles.marginTopview} />
<View style = {styles.inputview}>
<TextInput underlineColorAndroid = 'transparent' style = {styles.textinput} placeholder = 'QQ number / mobile number / email address' />
<View style = {styles.dividerview}>
<Text style = {styles.divider}> </ Text>
</ View>
<TextInput underlineColorAndroid = 'transparent' style = {styles.textinput} placeholder = 'password'
secureTextEntry = (true) />
</ View>
<View style = {styles.bottomview}>
<View style = {styles.buttonview}>
<Text style = {styles.logintext}> Login </ Text>
</ View>
<View style = {styles.bottombtnsview}>
<View style = {styles.bottomleftbtnview}>
<Text style = {styles.bottombtn}> Unable to log in? </ Text>
</ View>
<View style = {styles.bottomrightbtnview}>
<Text style = {styles.bottombtn}> New user </ 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: '# ECEDF1',
justifyContent: 'center',
},
avatarimage: {
width: 100,
height: 100,
alignSelf: 'center'
},
marginTopview: {
height: 15,
backgroundColor: '# F7F7F9'
},
inputview: {
height: 100,
},
textinput: {
flex: 1,
fontSize: 16,
},
dividerview: {
flexDirection: 'row',
},
divider: {
flex: 1,
height: 1,
backgroundColor: '# ECEDF1'
},
bottomview: {
backgroundColor: '# ECEDF1',
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); 

The above is a small set to introduce the react native to realize the login function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!