react-native实现字符串样式分割组件

╰+攻爆jí腚メ 2022-05-22 06:24 221阅读 0赞

# 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: ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Props</th> 
   <th align="left">Explain</th> 
   <th align="left">type</th> 
   <th align="left">require</th> 
   <th align="left">default</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">the string that needs to be split</td> 
   <td align="left">string</td> 
   <td align="left">yes</td> 
   <td align="left">”</td> 
  </tr> 
  <tr> 
   <td align="left">delimiter</td> 
   <td align="left">split string</td> 
   <td align="left">string</td> 
   <td align="left">no</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">style</td> 
   <td align="left">container style</td> 
   <td align="left">object</td> 
   <td align="left">no</td> 
   <td align="left">{ alignItems: ‘flex-end’ }</td> 
  </tr> 
  <tr> 
   <td align="left">frontStyle</td> 
   <td align="left">The style in the string before the split symbol</td> 
   <td align="left">object</td> 
   <td align="left">no</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">delimiterStyle</td> 
   <td align="left">Split symbol style</td> 
   <td align="left">object</td> 
   <td align="left">no</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">behindStyle</td> 
   <td align="left">The style behind the split symbol in the string</td> 
   <td align="left">object</td> 
   <td align="left">no</td> 
   <td align="left">{}</td> 
  </tr> 
 </tbody> 
</table>

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> ); }

## Code ##

import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import {
      View,
      Text,
      TextInput
    } from 'react-native';
    
    export default class StringDistinction extends Component {
      static propTypes = {
        frontStyle: TextInput.propTypes.style,
        delimiterStyle: TextInput.propTypes.style,
        behindStyle: TextInput.propTypes.style,
        style: View.propTypes.style,
        delimiter: PropTypes.string,
        value: PropTypes.string,
      };
    
      static defaultProps = {
        style: {
          alignItems: 'flex-end'
        },
      };
    
      render() {
        const { value, delimiter, style, frontStyle, delimiterStyle, behindStyle } = this.props;
        let frontValue = '';
        let behindValue = '';
        const splits = value && delimiter && value.split(delimiter);
    
        if (splits && splits.length) {
          frontValue = splits[0];
          behindValue = splits[1];
        }
    
        if (!delimiter) {
          return (
            <View style={[{ flexDirection: 'row' }, style]}> <Text style={frontStyle}>{value}</Text> </View> ); } return ( <View style={[{ flexDirection: 'row' }, style]}> <Text style={frontStyle}>{frontValue}</Text> <Text style={delimiterStyle}>{delimiter}</Text> <Text style={behindStyle}>{behindValue}</Text> </View> ); } }

[The final rendering]: https://github.com/suwu150/react-native-string-distinction/blob/master/react-native-text-segment.gif?raw=true