React-native TextInput Components and example code _android

At the same time fit with Android and iOS

Code comments More detailed

* *
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
* /
import React, {Component} from 'react';
Import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Platform,
TouchableOpacity,
} from 'react-native';
//Get screen information
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
class TextInputG extends Component {
Render () {
Return (
<View style={styles.container}>
{/ * the account input box is wrapped in view for processor style * /}
<View style={styles.textInputViewStyle}>
<TextInput
style={styles.textInputStyle}
/ / station symbol
Placeholder = 'phone number' / >
</View>
{/ * password input field * /}
<View style={styles.textInputViewStyle}>
<TextInput
style={styles.textInputStyle}
Placeholder = 'password'
/ / ciphertext
secureTextEntry={true}/>
</View>
{/ * to set the control, click * /}
< touchableopacity onpress = {() = > {alert ('click to login ')}} >
{/ * login button * /}
<View style={styles.textLoginViewStyle}>
< text style = {styles. Textloginstyle} > login < / text >
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
//Set full screen
Flex: 1,
// backgroundColor: 'black',
marginTop: 140,
}
//Package input box View style
textInputViewStyle: {
//Set the width minus 30 and center it 15 to the left and right
width: width - 30,
Height: 45,
//Set fillet degree
borderRadius: 18,
//Set the color of the border
borderColor: 'blue',
//Set the width of the border
borderWidth: 1,
/ / inner margin
paddingLeft: 10,
paddingRight: 10,
/ / outer margin
marginTop: 10,
marginLeft: 20,
marginRight: 20,
//Set relative parent control center
alignSelf: 'center',
}
//Input box style
textInputStyle: {
width: width - 30,
Height: 35,
paddingLeft: 8,
backgroundColor: '#00000000',
// alignSelf: 'center',
//Adapt to different platforms
marginTop: Platform.OS === 'ios' ? 4 : 8,
}
//Login button view style
textLoginViewStyle: {
width: width - 30,
Height: 45,
backgroundColor: 'red',
borderRadius: 20,
marginTop: 30,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
}
//Login text text style
textLoginStyle: {
fontSize: 18,
color: 'white',
}
};
module.exports = TextInputG; 

Thank you for reading, I hope to help you, thank you for your support for this site!