类似Facebook标签的TextInput - React Native

bxpogfeg  于 2023-03-03  发布在  React
关注(0)|答案(3)|浏览(146)

我现在正在做一个项目,我被要求像Facebook一样在你写或回复帖子时格式化文本。
我尝试了几种方法来实现这一点,但没有运气。TextInput可以接收文本子元素,但只要我在文本组件之后写一些其他的东西,所有的输入都转换成一个字符串。
此外,我不能格式化文本样式,以满足我的需要(我需要一个框与边框radious),因为文本不能嵌套一个视图。
这很难做到吗?

db2dz4w8

db2dz4w81#

嗯,这还不能做到,因为它可以在Android上使用Spannable和iOS上使用NSAttributeString,而这些资源还没有在React Native上。

iqxoj9l9

iqxoj9l92#

您可以尝试react-native-parsed-text,这是我在项目中使用的

mwngjboj

mwngjboj3#

import ParsedText from 'react-native-parsed-text'
...
  <TextInput
    ...
    onChangeText={text => this.setState({ value: text })}>
    <ParsedText style={styles.text} parse={[{ pattern: /#(\w+)/, style: styles.hashTag }]}
      childrenProps={{ allowFontScaling: false }}>{this.state.value}</ParsedText>
  </TextInput>
 ...
const styles = StyleSheet.create({
  hashTag: {
    fontStyle: 'italic', color:'red'
  },
});

我的解决方案:

相关问题