Rich ReactNative TextInput

Question

Un modo per creare un TextInput "ricco" in React Native? Forse non è un vero e proprio wysiwyg, ma forse basta cambiare il colore del testo di vari pezzi di testo; come la funzione @mention su Twitter o Facebook.

Answer 1

Per ottenere questo comportamento, è necessario utilizzare espressioni regolari. Qualcuno ha già creato un pacchetto per dare un'occhiata a react-native-parsed-text

Questa libreria consente di analizzare un testo ed estrarre parti utilizzando un RegExp o pattern predefiniti. Attualmente ci sono 3 tipi predefiniti: url, telefono ed e-mail.

Esempio dal loro github

<ParsedText 
      style={styles.text} 
      parse={ 
      [ 
       {type: 'url',      style: styles.url, onPress: this.handleUrlPress}, 
       {type: 'phone',      style: styles.phone, onPress: this.handlePhonePress}, 
       {type: 'email',      style: styles.email, onPress: this.handleEmailPress}, 
       {pattern: /Bob|David/,    style: styles.name, onPress: this.handleNamePress}, 
       {pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText}, 
       {pattern: /42/,      style: styles.magicNumber}, 
       {pattern: /#(\w+)/,     style: styles.hashTag}, 
      ] 
      } 
     > 
      Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. 
      But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com 
      And the magic number is 42! 
      #react #react-native 
</ParsedText> 

Answer 2

Date un'occhiata alla TokenizedTextExample dalla documentazione reagire nativi. Penso che ti avvicineremo a quello che stai cercando di fare. Il codice in questione segue:

class TokenizedTextExample extends React.Component { 
    state: any; 

    constructor(props) { 
    super(props); 
    this.state = {text: 'Hello #World'}; 
    } 
    render() { 

    //define delimiter 
    let delimiter = /\s+/; 

    //split string 
    let _text = this.state.text; 
    let token, index, parts = []; 
    while (_text) { 
     delimiter.lastIndex = 0; 
     token = delimiter.exec(_text); 
     if (token === null) { 
     break; 
     } 
     index = token.index; 
     if (token[0].length === 0) { 
     index = 1; 
     } 
     parts.push(_text.substr(0, index)); 
     parts.push(token[0]); 
     index = index + token[0].length; 
     _text = _text.slice(index); 
    } 
    parts.push(_text); 

    //highlight hashtags 
    parts = parts.map((text) => { 
     if (/^#/.test(text)) { 
     return <Text key={text} style={styles.hashtag}>{text}</Text>; 
     } else { 
     return text; 
     } 
    }); 

    return (
     <View> 
     <TextInput 
      multiline={true} 
      style={styles.multiline} 
      onChangeText={(text) => { 
      this.setState({text}); 
      }}> 
      <Text>{parts}</Text> 
     </TextInput> 
     </View> 
    ); 
    } 
} 

Answer 3

soluzione è che è possibile utilizzare <Text> elementi come bambini in un <TextInput> come questo:

<TextInput> 
    whoa no way <Text style={{color:'red'}}>rawr</Text> 
</TextInput>