react-native-string-distinction

1.0.3 • Public • Published

react-native-string-distinction

react-native-string-distinction,divide the character string according to a certain character and display it in different styles after segmentation

The final rendering

The final rendering

Installation:

 npm install --save react-native-string-distinction

Example usage:

1.basic

import StringDistinction from 'react-native-string-distinction';

   ...
  render() {
    return (
        <StringDistinction
          value={'9.02%'}
          delimiter={'.'}
          frontStyle={{ fontSize: 18, color: '#fd7251' }}
          delimiterStyle={{ fontSize: 18, color: '#fd7251' }}
          behindStyle={{ fontSize: 12, color: '#fd7251' }}
        />
    );
  }

Props:

Props Explain type require default
value the string that needs to be split string yes ''
delimiter split string string no no
style container style object no { alignItems: 'flex-end' }
frontStyle The style in the string before the split symbol object no no
delimiterStyle Split symbol style object no no
behindStyle The style behind the split symbol in the string object no {}

Examples from props:

   render() {
     return (
       <View>
         <Text>
           {`
           1.传入值:9.02%,用「.」进行分割
           2.传入值:你中有我,用「有」进行分割
           3.传入值:I Love You!!,用「ove」进行分割
           4.传入值:9.02%88988,用「%」进行分割
           5.传入值:Hello World,用「 」空格,进行分割
           6.传入值:Hello-World,不进行分割
           `}
         </Text>
         <StringDistinction
           value={'9.02%'}
           delimiter={'.'}
           frontStyle={{ fontSize: 18, color: '#fd7251' }}
           delimiterStyle={{ fontSize: 18, color: '#fd7251' }}
           behindStyle={{ fontSize: 12, color: '#fd7251' }}
         />
         <StringDistinction
           value={'你中有我'}
           delimiter={'有'}
           frontStyle={{ fontSize: 18, color: '#fd597a' }}
           delimiterStyle={{ fontSize: 18, color: '#cbfde5' }}
           behindStyle={{ fontSize: 12, color: '#fd7251' }}
         />
         <StringDistinction
           value={'I Love You!!'}
           delimiter={'ove'}
           frontStyle={{ fontSize: 20, color: '#ff4645' }}
           delimiterStyle={{ fontSize: 26, color: '#fd5098' }}
           behindStyle={{ fontSize: 20, color: '#fd14c2' }}
         />
         <StringDistinction
           value={'9.02%88988'}
           delimiter={'%'}
           frontStyle={{ fontSize: 18, color: '#fd7251' }}
           delimiterStyle={{ fontSize: 18, color: '#fd7251' }}
           behindStyle={{ fontSize: 20, color: '#fd7251' }}
         />
         <StringDistinction
           value={'Hello World'}
           delimiter={' '}
           frontStyle={{ fontSize: 18, color: '#fd7251' }}
           delimiterStyle={{ fontSize: 18, color: '#fd7251' }}
           behindStyle={{ fontSize: 26, color: '#fd7251' }}
         />
         <StringDistinction
           value={'Hello-World'}
         />
       </View>
     );
   }

LICENSE:

MIT

Package Sidebar

Install

npm i react-native-string-distinction

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

7.28 kB

Total Files

5

Last publish

Collaborators

  • suwu150