nativerepo.com

react-native-smart-security-text

A smart security text for React Native apps, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.25 and newer.

Preview

react-native-smart-security-text-preview-ios react-native-smart-security-text-preview-android

Installation

npm install react-native-smart-security-text --save

Full Demo

see ReactNativeComponentDemos

Usage

Install the button from npm with npm install react-native-smart-security-text --save. Then, require it from your app's JavaScript files with import SecurityText from 'react-native-smart-security-text'.

import React, {
    Component,
} from 'react'
import {
    View,
    Text,
    Image,
} from 'react-native'

import SecurityText from 'react-native-smart-security-text'
import Button from 'react-native-smart-button'

import image_eye_open from '../images/eye_open.png'
import image_eye_close from '../images/eye_close.png'

export default class SecurityTextDemo extends Component {

    // 构造
      constructor(props) {
        super(props)
        // 初始状态
        this.state = {
            isSecurity: false,
        }
      }

    render() {
        return (
            <View style={{marginTop: 64, flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff',}}>
                <Button
                    style={{margin: 10, justifyContent: 'center', height: 40, justifyContent: 'center',}}
                    onPress={this._onSecurityChange}
                >
                    <Image source={this.state.isSecurity ? image_eye_close : image_eye_open} style={{width: 40, height: 40, marginRight: 3, }}/>
                </Button>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        startIndex: 3,
                        endIndex: 7,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    15912390987
                </SecurityText>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        startIndex: 0,
                        endIndex: 1,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    15912390987
                </SecurityText>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        startIndex: 0,
                        endIndex: 12,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    15912390987
                </SecurityText>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        startIndex: 11,
                        endIndex: 12,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    15912390987
                </SecurityText>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        startIndex: -7,
                        endIndex: -3,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    15912390987
                </SecurityText>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        length: 4,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    username
                </SecurityText>
                <SecurityText
                    securityOptions={{
                        isSecurity: this.state.isSecurity,
                        length: 10,
                    }}
                    style={{margin:10, fontSize: 16, color: 'red',}}>
                    address
                </SecurityText>
            </View>
        )
    }

    _onSecurityChange = () => {
        let isSecurity = !this.state.isSecurity
        this.setState({
            isSecurity,
        })
    }
}

Props

PropTypeOptionalDefaultDescription
...Text.propTypesYessee react-native documents
securityOptionsshapeYes{}
securityOptions.isSecurityboolYesfalsewhen the value is true, origin text will be replaced with security text
securityOptions.startIndexnumberYes0determines the startIndex of security text
securityOptions.endIndexnumberYesdetermines the endIndex of security text
securityOptions.lengthnumberYesdetermines the length of security text
securityOptions.securityCharstringYes'*'determines the securityChar of security text

Comments
Details
Added at: 2017/03/19
Owner: react-native-component
Category: other
Homepage: https://github.com/react-native-component/react-native-smart-security-text#readme
Downloads last month: 76
Version: 1.0.1
Compatibility
  •  
  •  

Add to your project

npm i --save react-native-smart-security-text