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
Installation
npm install react-native-smart-security-text --save
Full Demo
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'
.
// 构造 { superprops // 初始状态 thisstate = isSecurity: false } { 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=thisstateisSecurity ? image_eye_close : image_eye_open style=width: 40 height: 40 marginRight: 3 /> </Button> <SecurityText securityOptions= isSecurity: thisstateisSecurity startIndex: 3 endIndex: 7 style=margin:10 fontSize: 16 color: 'red'> 15912390987 </SecurityText> <SecurityText securityOptions= isSecurity: thisstateisSecurity startIndex: 0 endIndex: 1 style=margin:10 fontSize: 16 color: 'red'> 15912390987 </SecurityText> <SecurityText securityOptions= isSecurity: thisstateisSecurity startIndex: 0 endIndex: 12 style=margin:10 fontSize: 16 color: 'red'> 15912390987 </SecurityText> <SecurityText securityOptions= isSecurity: thisstateisSecurity startIndex: 11 endIndex: 12 style=margin:10 fontSize: 16 color: 'red'> 15912390987 </SecurityText> <SecurityText securityOptions= isSecurity: thisstateisSecurity startIndex: -7 endIndex: -3 style=margin:10 fontSize: 16 color: 'red'> 15912390987 </SecurityText> <SecurityText securityOptions= isSecurity: thisstateisSecurity length: 4 style=margin:10 fontSize: 16 color: 'red'> username </SecurityText> <SecurityText securityOptions= isSecurity: thisstateisSecurity length: 10 style=margin:10 fontSize: 16 color: 'red'> address </SecurityText> </View> } { let isSecurity = !thisstateisSecurity this }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
...Text.propTypes | Yes | see react-native documents | ||
securityOptions | shape | Yes | {} | |
securityOptions.isSecurity | bool | Yes | false | when the value is true, origin text will be replaced with security text |
securityOptions.startIndex | number | Yes | 0 | determines the startIndex of security text |
securityOptions.endIndex | number | Yes | determines the endIndex of security text | |
securityOptions.length | number | Yes | determines the length of security text | |
securityOptions.securityChar | string | Yes | '*' | determines the securityChar of security text |