傳遞複選框值顯示/隱藏密碼通過反應本地

Question

我使用火力地堡的權威性，我會想添加一個複選框，它會顯示在密碼文本框中輸入密碼和隱藏它時，它再次單擊

如何通過複選框值顯示/隱藏密碼？

這是我的登錄頁面代碼：

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

這樣做的一種方法是設置一個狀態變量，如showPassword和tog每當複選框被選中時都會閃爍。像這樣：

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 2

請糾正我，如果我錯了，你問如何創建一個複選框？如果是這樣，你有兩條路線，要麼使用網上許多複選框之一的第三方庫，或者你可以自己創建一個。

步驟：

1. 下載圖標庫這樣https://github.com/oblador/react-native-vector-icons這樣你就可以從enter link description here例如使用這兩種材料設計的圖標。複選框空白大綱和複選框標記爲模擬點擊和不點擊
2. 使用這兩個新的圖標，只需創建一個新的組件與你想要什麼功能，並處理所有狀態和你想要的方式。

基本實現：

1. 有如果它被選中控制或狀態不
2. 有一個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}/>