React native 创建一个TextInput组件，该组件可以输出正常值并输出****/secureTextEntry={true}

因此，我在创建文本输入组件时遇到了问题，就像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>
    )
  }
}

import React，{Component}来自“React”
从“道具类型”导入道具类型
从“react native”导入{TouchableOpacity，Text}
从“./styles/RoundedButtonStyles”导入样式
从“../Services/ExamplesRegistry”导入ExamplesRegistry
//请注意，此文件（App/Components/RoundedButton）需要
//已导入应用程序中的某个位置，否则您的组件将不可用
//编译并添加到示例开发屏幕。
//在覆盖率报告中忽略
/*伊斯坦布尔下一站*/
ExamplesRegistry.addComponentExample（'Rounded Button'，（）=>
window.alert（'按下圆形按钮！'）}
/>
)
导出默认类RoundedButton扩展组件{
静态类型={
onPress:PropTypes.func，
text:PropTypes.string，
子项：PropTypes.string，
导航器：PropTypes.object
}
getText（）{
const buttonText=this.props.text | | this.props.children | |”
return buttonText.toUpperCase（）返回按钮
}
渲染（）{
返回(
{this.getText（）}
)
}
}

将secureTextEntry链接到组件状态/prop，并在按下按钮时更改它

所以像这样：

secureTextEntry={this.state.showDots}

然后按下按钮

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