Bagaimana untuk melaksanakan fungsi menyembunyikan kata laluan dalam bertindak balas-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan fungsi menyembunyikan kata laluan dalam bertindak balas

藏色散人

Lepaskan： 2023-01-04 16:47:22

asal

2284 orang telah melayarinya

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.

Bagaimana untuk melaksanakan fungsi menyembunyikan kata laluan dalam bertindak balas

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

Bagaimana untuk melaksanakan fungsi menyembunyikan kata laluan dalam bertindak balas

2. Tambah kebergantungan

import {
  View,
  Text,
  TouchableWithoutFeedback,
  TextInput,
  Image,
  StyleSheet,
} from &#39;react-native&#39;;

Salin selepas log masuk

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

Salin selepas log masuk

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!