React-Native TextInput組件詳解及執行個體代碼_Android

同時適配Android和IOS

代碼注釋比較詳細

/** * 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';//擷取螢幕資訊var Dimensions = require('Dimensions');var width = Dimensions.get('window').width;class TextInputG extends Component {  render() {    return (      <View style={styles.container}>        {/*帳號輸入框在這裡用View包裹以便處理器樣式*/}        <View style={styles.textInputViewStyle}>          <TextInput            style={styles.textInputStyle}            //站位符            placeholder='手機號'/>        </View>        {/*密碼輸入框*/}        <View style={styles.textInputViewStyle}>          <TextInput            style={styles.textInputStyle}            placeholder='密碼'            //密文            secureTextEntry={true}/>        </View>        {/*設定控制項可點擊*/}        <TouchableOpacity onPress={()=>{alert('點擊登入')}}>          {/*登入按鈕*/}          <View style={styles.textLoginViewStyle}>            <Text style={styles.textLoginStyle}>登入</Text>          </View>        </TouchableOpacity>      </View>    );  }}const styles = StyleSheet.create({  container: {    //設定佔滿螢幕    flex: 1,    // backgroundColor: 'black',    marginTop: 140,  },  //包裹輸入框View樣式  textInputViewStyle: {    //設定寬度減去30將其置中左右便有15的距離    width: width - 30,    height: 45,    //設定圓角程度    borderRadius: 18,    //設定邊框的顏色    borderColor: 'blue',    //設定邊框的寬度    borderWidth: 1,    //內邊距    paddingLeft: 10,    paddingRight: 10,    //外邊距    marginTop: 10,    marginLeft: 20,    marginRight: 20,    //設定相對父控制項置中    alignSelf: 'center',  },  //輸入框樣式  textInputStyle: {    width: width - 30,    height: 35,    paddingLeft: 8,    backgroundColor: '#00000000',    // alignSelf: 'center',    //根據不同平台進行適配    marginTop: Platform.OS === 'ios' ? 4 : 8,  },  //登入按鈕View樣式  textLoginViewStyle: {    width: width - 30,    height: 45,    backgroundColor: 'red',    borderRadius: 20,    marginTop: 30,    alignSelf: 'center',    justifyContent: 'center',    alignItems: 'center',  },  //登入Text文本樣式  textLoginStyle: {    fontSize: 18,    color: 'white',  },});module.exports = TextInputG;

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！