我想为 React-Native TextInput 的每个字符值使用不同的颜色和字体系列

问题描述

我的代码：

export default class ClearComponent extends Component {


    color= ['red','blue']
    font_family= ['normal','notoserif','sans-serif']
    state = {
    text: '',context: [
      
    ],color:"black",font_family:"normal",};

  textInputOnChange = (text) => {
    const {context,color,font_family} = this.state;
    
    if (context.length > text.length) {
        
        context.pop()
       this.setState({
            context


       })
      
    } else {
        this.setState({
            context:[...context,{
                value: text[text.length - 1],font_family
              }]
        })
      
      
    }
  };
 

  render() {
    const {context} = this.state;
    const { color,font_family} =  this
    return (
      
      <View>
        <TextInput  onChangeText={this.textInputOnChange}>
          {context.map((element) => {
              
            return (
              <Text
                style={{fontFamily: element.font_family,color: element.color,fontSize:25}}>
                {element.value}
              </Text>
            );
          })}
        </TextInput>
        <Picker
        selectedValue={this.state.font_family}
        mode="dropdown"
        onValueChange={(itemValue,itemIndex) => {
            this.setState({font_family: itemValue});
          }}
        >
          {font_family.map((element) => {
            return (
              <Picker.Item
                key={(key) => key.id}
                value={element}
                label={element}
              />
            );
          })}
        </Picker>
        <View style={{flexDirection: 'row'}}>
          {color.map((element) => {
            return (
              <TouchableOpacity onPress={()=>{
                  this.setState({color:element}) 
                  console.log(this)}}>
                <Text
                  style={{
                    height: 25,width: 25,backgroundColor: element,borderRadius: 20,marginHorizontal: 2,marginVertical: 2,}}/>
              </TouchableOpacity>
            );
          })}
        </View>
        <Text style={{fontFamily:"",fontSize:40}}>dsadas</Text>
      </View>
    );
  }
}

我正在开发一个笔记本应用程序。我也遇到过这样的问题，我找到了一些解决方案，但还不够，还带来了很多问题。

我想为每个字符定义不同的样式，但这段代码效果不佳。

有专门的图书馆吗？

我愿意接受您的替代解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）