How to implement password hiding function in react

How to implement password hiding function in react: 1. Add dependency "import {View,Text,TouchableWithoutFeedback,TextInput,Image,StyleSheet,} from 'react-native';"; 2. Pass "{this. state.imageState ? (...)}" method to implement the password display and hiding functions.

The operating environment of this tutorial: Windows 10 system, React Native version 0.67, Dell G3 computer.

How to implement password hiding function in react?

React Native Password input display and hiding Image click event eye input box password

1. Effect picture

2. Add dependencies

import {
  View,
  Text,
  TouchableWithoutFeedback,
  TextInput,
  Image,
  StyleSheet,
} from 'react-native';

3. Code function implementation

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageState: false,
    };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: &#39;space-around&#39; }}>
        <View
          style={{ backgroundColor: &#39;#ffffff&#39;, height: 50, flexDirection: &#39;row&#39;, justifyContent: &#39;space-between&#39;, marginTop: 1, }}>
          <Text style={pageStyle.textStyle}>请输入密码:</Text>
          <TextInput
            secureTextEntry={!this.state.imageState}//是否隐藏
            editable={true}//是否可编辑
            style={pageStyle.textInfoStyle}>
            test12345test
          </TextInput>
          <TouchableWithoutFeedback style={{ marginRight: 10 }} onPress={this.onPressChang}>
            {this.state.imageState ? (
              <Image style={{ width: 21, height: 14, alignSelf: &#39;center&#39;, marginRight: 10, }}
                source={require(&#39;../ReactDemo1/android/app/src/main/res/mipmap-xhdpi/password_show.png&#39;)}
              />) : (<Image style={{ width: 20, height: 8, alignSelf: &#39;center&#39;, marginRight: 10, }}
                source={require(&#39;../ReactDemo1/android/app/src/main/res/mipmap-xhdpi/password_hide.png&#39;)}
              />)}
          </TouchableWithoutFeedback>
        </View>
      </View>
    );
  }
  onPressChang = () => {
    this.setState({
      imageState: !this.state.imageState,
    });
  };
}
const pageStyle = StyleSheet.create({
  textInfoStyle: {
    alignSelf: &#39;center&#39;,
    marginLeft: 40,
    color: &#39;#343434&#39;,
    fontSize: 16,
    flex: 1,
  },
  textStyle: {
    alignSelf: &#39;center&#39;,
    marginLeft: 10,
    color: &#39;#343434&#39;,
    fontSize: 16,
  },
});

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement password hiding function in react. For more information, please follow other related articles on the PHP Chinese website!