Question

我使用Firebase身份验证我想要添加一个复选框，它会在密码文本框中显示密码，并在再次点击时隐藏它

如何传递复选框值以显示/隐藏密码？

这是我的登录页码：

export default class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            email: '',
            password: '',
            response: ''
        }
        this.signUp = this.signUp.bind(this)
        this.login = this.login.bind(this)
    }

    async signUp() {
        try {
            await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
            this.setState({
                response: 'Account Created!'
            })
            setTimeout(() => {
                this.props.navigator.push({
                    id: 'App'
                })
            }, 500)
        } catch (error) {
            this.setState({
                response: error.toString()
            })
        }
    }
    async login() {
        try {
            await firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
            this.setState({
                response: 'user login in'
            })

            setTimeout(() => {
                this.props.navigator.push({
                    id: 'App'
                })
            })

        } catch (error) {
            this.setState({
                response: error.toString()
            })
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.containerInputes}>
                    <TextInput
                        placeholderTextColor="gray"
                        placeholder="Email"
                        style={styles.inputText}
                        onChangeText={(email) => this.setState({ email })}
                    />
                    <TextInput
                        placeholderTextColor="gray"
                        placeholder="Password"
                        style={styles.inputText}
                        password={true}
                        secureTextEntry={true}
                        onChangeText={(password) => this.setState({ password })}
                    />
                </View>
                <TouchableHighlight
                    onPress={this.login}
                    style={[styles.loginButton, styles.button]}
                >
                    <Text
                        style={styles.textButton}
                    >Login</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={this.signUp}
                    style={[styles.loginButton, styles.button]}
                >
                    <Text
                        style={styles.textButton}
                    >Signup</Text>
                </TouchableHighlight>
            </View>
        )
    }
}

Answer 1

import React, {useState} from 'react';
import {TextInput} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome5';

const [hidePass, setHidePass] = useState(true);
    
    <TextInput
              placeholder="Old password"
              autoCompleteType="password"
              secureTextEntry={hidePass ? true : false}
            />
            <Icon
              name={hidePass ? 'eye-slash' : 'eye'}
              size={15}
              color="grey"
              onPress={() => setHidePass(!hidePass)}
            />

Answer 2

这样做的一种方法是设置状态变量，如showPassword，并在选中复选框时切换它。像这样：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View, 
  TextInput,
  Switch
} from 'react-native';

export default class DemoProject extends Component {
  constructor(props) {
    super(props);
    this.toggleSwitch = this.toggleSwitch.bind(this);
    this.state = {
      showPassword: true,
    }
  }

  toggleSwitch() {
    this.setState({ showPassword: !this.state.showPassword });
  }

  render() {
    return (
      <View>
        <TextInput
          placeholderTextColor="gray"
          placeholder="Password"
          secureTextEntry={this.state.showPassword}
          onChangeText={(password) => this.setState({ password })}
        />
        <Switch
          onValueChange={this.toggleSwitch}
          value={!this.state.showPassword}
        /> 
        <Text>Show</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('DemoProject', () => DemoProject);

注意：如果您设置密码prop !!!

，则无效

因此，只需使用常规TextInput并使用secureTextEntry道具。

Answer 3

如果我错了，请纠正我，你问的是如何创建一个复选框？如果是这样，您有两条路线，要么使用网络上许多复选框之一的第三方库，要么您自己创建一个。

步骤：

下载一个图标库https://github.com/oblador/react-native-vector-icons，这样您就可以使用enter link description here中的两个材质设计图标，例如。 checkbox-blank-outline和checkbox-marked模拟点击而不是点击
使用这两个新图标，只需使用您想要的功能创建一个新组件，并按照您想要的方式处理所有状态。

基本实施：

有一个控制是否已检查的状态
有一个onPress函数来处理这两种状态并触发相应的道具

// the on press function
onPress = () => {
  if (this.sate.checked) {
    this.props.checked();
  } else {
    this.props.unChecked();
  }
}

// the rendered component
<Icon name={this.state.checked ? "checkbox-marked" : "checkbox-blank-outline" onPress={this.onPress}/>

Answer 4

这就是我的简单方式

我的复选框和密码部分，

jQuery.fn.extend( {
    serialize: function() {
        return jQuery.param( this.serializeArray() );
    },
    serializeArray: function() {
        return this.map( function() {

            // Can add propHook for "elements" to filter or add form elements
            var elements = jQuery.prop( this, "elements" );
            return elements ? jQuery.makeArray( elements ) : this;
        } )
        .filter( function() {
            var type = this.type;

            /* RELEVANT CODE */
            // Use .is( ":disabled" ) so that fieldset[disabled] works
            return this.name && !jQuery( this ).is( ":disabled" ) &&
                rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
                ( this.checked || !rcheckableType.test( type ) );
        } )
        .map( function( i, elem ) {
            var val = jQuery( this ).val();

            if ( val == null ) {
                return null;
            }

            if ( Array.isArray( val ) ) {
                return jQuery.map( val, function( val ) {
                    return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                } );
            }

            return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
        } ).get();
    }
} );

我的状态

<input style={ inputUname } type={this.state.type} placeholder="Password" value={ this.state.password } onChange={this.handlePassword}/>
<Checkbox defaultChecked={false} onSelection={this.showPassword} value="false" name="Checkbox" label="Show password"/>

这是我的显示密码事件，

this.state = {
     type: 'input'
}

Answer 5

这是我的处理方式

const LoginScreen = props => {
  const [icon, setIcon] = useState("eye-off")
  const [hidePassword, setHidePassword] = useState(true)

  _changeIcon = () => {
    icon !== "eye-off"
      ? (setIcon("eye-off"), setHidePassword(false))
      : (setIcon("eye"), setHidePassword(true))
  }

我为textInput使用了本地基础

 <Input
              secureTextEntry={hidePassword}
              placeholder="Password"
              placeholderTextColor={palette.gray}
            />
            <Icon name={icon} size={20} onPress={() => _changeIcon()} />

这将在单击时更改secureTextEntry

传递复选框值以通过本机

5 个答案: