React-Native 텍스트 입력 상자 구성 요소 의 구현 코드 만 들 기

최근 에 회사 프로젝트 를 계속 하고 있 고 급 하기 때문이다.지금 프로젝트 는 이미 3 기로 교체 되 었 으 니 좀 늦 출 수 있다.
솔직히 요즘 안 드 로 이 드 로 개발 하고 시간 도 넉넉 하지 않 아 react-native 가 좀 서 툴 러 요.
자,쓸데없는 소리 하지 마 세 요.오늘 로그 인 화면 을 할 때 로그 인 된 텍스트 상자 스타일 이 똑 같 습 니 다.한 개 씩 쓰 면 좀 번 거 로 워 보 입 니 다.그래서 저 는 TextInput 이라는 구성 요 소 를 간단하게 봉 했 습 니 다.

위의 그림 은 내 가 로그 인 인터페이스 에 넣 은 효과 다.
코드:

import React, { Component } from 'react';

import {
  Text,
  TextInput,
  View,
  PropTypes,
  StyleSheet,
  ToastAndroid
} from 'react-native'

class TextInputLogin extends Component {
  static propTypes = {
    name: React.PropTypes.string,
    txtHide: React.PropTypes.string,
    ispassword: React.PropTypes.bool
   }

  static defaultProps = {
    name: '  ',
    txtHide: '  ',
    ispassword: false,
  }
   constructor (props) {
    super (props)
    this.state = {
     txtValue: "",
    }
  }
  render () {
    var { style, name, txtHide, ispassword } = this.props
    return(
      <View style={styles.container,style}>
        <View style={styles.txtBorder}>
          <Text style={styles.txtName}>{name}</Text>
          <TextInput
            underlineColorAndroid = {'transparent'}
            style={styles.textInput}
            multiline={false}
            placeholder={txtHide}
            password={ispassword} 
            onChangeText={(text) => {
              this.setState({
                txtValue: text
              })
            }}
            value={this.state.txtValue}
          />
        </View>
      </View>
    )
  }
  getValue () {
    return this.state.txtValue
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row'
  },
  txtBorder: {
    height: 50,
    flex: 1,
    borderWidth: 1,
    borderColor: '#51A7F9',
    marginLeft: 50,
    marginRight: 50,
    borderRadius: 25,
    flexDirection: 'row'
  },
  txtName: {
    height: 20,
    width: 40,
    marginLeft: 20,
    fontSize: 15,
    marginTop: 15,
    color: '#51A7F9',
    marginRight: 10,
    fontSize: 14
  },
  textInput: {
    height: 50,
    width: 200
  }
})

module.exports = TextInputLogin;

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.