Rich ReactNative TextInput

Question

Jede Möglichkeit zum Erstellen eines "reichen" TextInput in React Native? Vielleicht kein ausgewachsener Wysiwyg, aber vielleicht nur die Textfarbe verschiedener Textstücke ändern; wie die @ Mention-Funktion auf Twitter oder Facebook.

Answer 1

Sie müssen regex verwenden, um dieses Verhalten zu erreichen. Jemand hat bereits ein Paket dafür erstellt. Werfen Sie einen Blick auf react-native-parsed-text

Diese Bibliothek ermöglicht es Ihnen, einen Text zu analysieren und Teile mit einer RegExp oder vordefinierten Mustern zu extrahieren. Derzeit gibt es 3 vordefinierte Typen: URL, Telefon und E-Mail.

Beispiel aus ihrer 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

Werfen Sie einen Blick auf den TokenizedTextExample aus der reagieren-native docs. Ich denke, das wird dich nah an das bringen, was du machen willst. Der entsprechende Code folgt:

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

Lösung ist, dass Sie <Text> Elemente wie Kinder in einem <TextInput> wie diese verwenden:

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