【问题标题】:Rich ReactNative TextInput丰富的 ReactNative 文本输入
【发布时间】:2023-03-28 22:01:02
【问题描述】:

有什么方法可以在 React Native 中创建一个“丰富的”TextInput?也许不是一个完整的所见即所得,但也许只是改变各种文本的文本颜色;喜欢 Twitter 或 Facebook 上的@提及功能。

【问题讨论】:

  • 您找到解决方案了吗?我正在尝试做类似的事情(只是更像是一个带有 粗体斜体等的富文本编辑器)。
  • 没有。我从来没有找到解决办法。就我而言,我试图在输入中使用某种容器或背景颜色来设置 @mentions 样式。最后只是从输入中删除该文本并将其放在上面的另一个视图中。并不理想,但它确实有效。
  • @chapeljuice 找到解决方案 - stackoverflow.com/a/49082641/1828637
  • @nicholas 问得太晚了.. 但如果可能的话,你能给出一个解决方案吗
  • @SagarChavada Noitidart 下面的解决方案效果很好。

标签: react-native


【解决方案1】:

解决方案是您可以使用 <Text> 元素作为 <TextInput> 中的子元素,如下所示:

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

【讨论】:

  • 哇!你能做到吗?我将不得不试一试。
  • @nicholas haha​​ha 是的,我的想法也被吹走了。我做 RN 一年了,我不知道!
  • 这适用于Android,有人知道如何在IOS上做到这一点吗?
  • 是的,我做了一个测试,它不起作用。如果您尝试在博览会小吃 /snack.expo.io 中工作,文本将不会出现,如果您在 CRNA 项目中工作,则会引发警告
  • @Noitidart 你能帮我解决这个问题吗stackoverflow.com/questions/52342466/… 我无法在 TextInput 上应用视图
【解决方案2】:

这个问题是不久前提出的,但我认为我的回答可以帮助其他人寻找如何为字符串的@mention 部分着色。我不确定我的做法是干净的还是“反应”的方式,但这是我的做法: 我将输入的字符串用空格作为分隔符进行拆分。然后我循环遍历数组,如果当前项目与@mention/@user 的模式匹配,则将其替换为应用了样式的 Text 标记;否则返回该项目。最后,我在 TextInput 元素中呈现 inputText 数组(包含字符串和 jsx 元素)。希望这可以帮助!

render() {
let inputText = this.state.content;
if (inputText){
  inputText = inputText.split(/(\s)/g).map((item, i) => {
    if (/@[a-zA-Z0-9]+/g.test(item)){
      return <Text key={i} style={{color: 'green'}}>{item}</Text>;
    } 
    return item;
  })
return <TextInput>{inputText}</TextInput>

【讨论】:

  • 你有我的尊重!谢谢。
  • iOS 支持 内的嵌套 吗?
  • 我不确定它是否仍受支持。但是它像一年​​前一样对我有用。你可以试试
【解决方案3】:

查看 react-native 文档中的 TokenizedTextExample。我认为这会让你接近你想要做的事情。相关代码如下:

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

【讨论】:

  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能会失效
  • 感谢您的反馈。我已按照建议更新了回复。
  • 哇,我从来不知道你可以把&lt;Text&gt; 作为孩子放在&lt;TextInput&gt; 中!这太酷了! RN 文档中似乎不再存在此示例,您有什么地方可以找到吗?
  • 设置为 的子项在 IOS 上不起作用。其他提示:如果你设置 的 value 属性,它会给你一个错误,因为你不能在同一个 中拥有 子元素和 value 属性
【解决方案4】:

您必须使用 regex 才能实现该行为。有人已经为此创建了包,请查看react-native-parsed-text

此库允许您使用 RegExp 或预定义模式解析文本并提取部分。目前有 3 种预定义类型:url、电话和电子邮件。

来自他们的 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>

【讨论】:

  • 这将有助于匹配文本中键入的模式,但问题是我如何才能在文本输入中更改该文本的样式?就像 facebook 在文本字段本身中以蓝色背景突出您提及的名字一样。
  • 您可以通过将ParsedText 放在TextInput 组件中并删除TextInput 的道具value 来做到这一点,之后只需将ParsedText 的孩子设置为您在TextInput 中设置的值,如下所示:``` this.setState({text})}> {this.state.text} ```
  • @JérémyMagrin 我认为ParsedText 仅适用于Android,这是真的吗?
  • @Nakib,6 年后你好 :),我想知道如何申请功能组件
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-14
  • 2019-06-02
  • 2011-05-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多