Question

我正在使用本机编写文本编辑器，我正在使用<TextInput/>供用户在其中键入文本，此刻我正在使用粗体按钮，当用户单击粗体时，假设将文本1到文本4保存在数组中，即[ [ 0, 4 ] ]，则将要用粗体显示的文本的位置将保存在数组中，即如果将文本8到文本10加粗，则将添加到数组中（名称为previousSelections），因此该数组将为[ [ 1, 4 ], [ 8, 10 ] ]，然后我创建了另一个数组来存储不会被加粗的文本，即受加粗按钮的影响，因此文本5到7不会加粗，unbolded array will be [ [ 5, 7 ] ]因此我创建了一个函数，用于基于unbolded和previousSelections数组呈现整个文本，然后将react native元素存储在数组中将它们组合并存储在变量中，这就是我在下面的代码中做到的方式

const items = [];
            const items_ = [];
                for(i=0;i<previousSelections.length;i++){
                    items.push([React.createElement(Text,{style:{fontWeight: 'bold'}}, 
                    text2.substring(previousSelections[i][0], previousSelections[i][1]))])
                }
                 for(i=0;i<unbolded.length;i++){
                      items_.push([React.createElement(Text,{style:{
                        fontSize: 15, fontFamily: 'zsMedium', color: 'black',    
                    }}, text2.substring(unbolded[i][0], unbolded[i][1]))]);
                  }  
                const M = '';  
                for(i=0;i<items.length;i++){
                if(i != items.length-1){
                    for(j=0;j<items_.length;j++){
                        if(i == j){
                            M+= items[i][0]+items_[j][0];
                        }
                    }
                }else{
                    M+= items[i][0];
                }

                }   

            return(
                <Text style={styles.text}>{text2.substring(0, previousSelections[0][0])}
                <M/>
                {text2.substring(previousSelections[length-1][1], text2.length)}</Text>
            );

onSelectionChange存储突出显示的文本的位置

onSelectionChange = event => {
        const {selection: [start, end], text, pressed, boldButton, previousSelections} = this.state
        const selection = event.nativeEvent.selection;
        console.log(selection.start+"<<selection.start::selection.end>>"+selection.end+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n'+'\n')
        // const selected = text.substring(start, end); 
        this.setState({
          selection: [selection.start, selection.end]
        }, );
    };

text2是输入的文本

它显示错误Error: Invariant Violation: Invariant Violation: View config not found for name [object Object][object Object][object Object][object Object][object Object]，请问如何方便地组合react native元素。

结合React本机组件

0 个答案: