создание компонента TextInput, который может выводить нормально и выводить **** / secureTextEntry = {true}

Question

Итак, у меня проблема с созданием компонента ввода текста, как когда IGNITE CLI создал компонент с именем RoundedButton (код показан ниже).Я хочу создать аналогичный компонент, но TextInput, который может выводить нормальный вывод и выводить символ **** при каждом нажатии и необходимости с простой настройкой.Как я могу это сделать?

Это код для RoundedButton:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { TouchableOpacity, Text } from 'react-native'
import styles from './Styles/RoundedButtonStyles'
import ExamplesRegistry from '../Services/ExamplesRegistry'

// Note that this file (App/Components/RoundedButton) needs to be
// imported in your app somewhere, otherwise your component won't be
// compiled and added to the examples dev screen.

// Ignore in coverage report
/* istanbul ignore next */
ExamplesRegistry.addComponentExample('Rounded Button', () =>
 <RoundedButton
   text='real buttons have curves'
    onPress={() => window.alert('Rounded Button Pressed!')}
  />
)

export default class RoundedButton extends Component {
      static propTypes = {
    onPress: PropTypes.func,
    text: PropTypes.string,
    children: PropTypes.string,
    navigator: PropTypes.object
  }

  getText () {
    const buttonText = this.props.text || this.props.children || ''
    return buttonText.toUpperCase()
  }

  render () {
    return (
      <TouchableOpacity style={styles.button} onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.getText()}</Text>
      </TouchableOpacity>
    )
  }
}

Answer 1

Подключите secureTextEntry к состоянию компонента / реквизиту и измените его при нажатии кнопки.

Вот так:

secureTextEntry={this.state.showDots}

и затем при нажатии кнопки

onPress = () => {
    this.setState({ showDots: true/false})
}