Bagaimana untuk melaksanakan fungsi menyembunyikan kata laluan dalam bertindak balas

Cara melaksanakan fungsi penyembunyian kata laluan dalam tindak balas: 1. Tambah kebergantungan "import {View,Text,TouchableWithoutFeedback,TextInput,Image,StyleSheet,} daripada 'react-native';" 2. Lulus "{this . state.imageState ? (...)}" kaedah untuk melaksanakan paparan kata laluan dan fungsi menyembunyikan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, React Native versi 0.67, komputer Dell G3.

Bagaimana untuk melaksanakan fungsi penyembunyian kata laluan dalam bertindak balas?

Paparan Input Kata Laluan Asli Bertindak balas dan Sembunyikan Kata Laluan Kotak Input Mata Acara Klik Imej

1. Gambar Kesan

2. Tambah kebergantungan

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

3. Pelaksanaan fungsi kod

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,
  },
});

Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi menyembunyikan kata laluan dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!