環形<text>通過數組並在本機反應中並排顯示</text>

Question

我有一個數組，其中填充了 object 包含兩個鍵，即 HTML 標記的名稱作為名稱，文本作為文本。 我正在循環遍歷數組的所有 object，然后將object['name']與固定標簽名稱進行比較，例如strong、h1、h2、pre、var並使用具有我喜歡的樣式的組件顯示文本內容如果像這樣阻止：

     const TagSelector = function(tagName , $text , $key){
  
        if(tagName == "strong"){
            return <Text  key={$key} style={{ fontWeight: 'bold' , paddingHorizontal:3 , paddingVertical:10}}>{$text}</Text>
        }

        if(tagName == "h1"){
          return <H2 key={$key} >{$text}</H2>
        }

        if(tagName == "h2"){
           return <H3 key={$key} style={{paddingHorizontal:5 , paddingVertical:5 }}>{$text}</H3>
        }

        if(tagName == "pre"){
           return <Text  key={$key} style={{ fontSize:11 , paddingHorizontal:7 , paddingVertical:7 ,  borderColor: '#d8d7d7', borderWidth: 1 , backgroundColor:'#eee' ,   borderRadius:10, margin:5 }}>{$text}</Text>
        }

        if(tagName == "var"){
            return <View style={{flexDirection:'row', flexWrap:'wrap' ,  justifyContent:'space-between'}}><Text key={$key} style={{backgroundColor:'red' , color:'black' }}>{$text}</Text> 
           </View> 
        }
     } 

我的 Object：

         var collection = [{
            "name": "p",
            "text": "Keywords are ..... . For example:"
         }, {
            "name": "var",
            "text": "int"
         }, {
            "name": "var",
            "text": " money;"
         }, {
            "name": "var",
            "text": "Here, "
         },
         {
            "name": "strong",
            "text": "This is fine "
         }]

循環 Function：

     const ContentScreen = () => {
         return <ScrollView style={{paddingHorizontal:12, marginTop:10}}>
               {
                 collection.map((con , index)=>{
                  return TagSelector(con.name , con.text , index+'_Tags');
               })
          }
          </ScrollView>
     }

問題：

在var的情況下，我想創建這樣的樣式，它與預期 Output的第一個字母並排顯示：

     Keywords are ...... For example:
     int money; Here,
     **This is fine** 

這是我得到的 Output

我嘗試了什么：

1. 我瀏覽了 react native的官方文檔
2. Stackoverflow 回答 1 這個
3. Stackoverflow 回答 2 這個等

我無法解決這個問題，請幫助我。

Answer 1

這是我嘗試時得到的 output。

這是代碼：

import React, {useState} from 'react';
import {View, Text} from 'react-native';

const App = () => {
  const [data] = useState([
   {
     name: 'p',
     text: 'Keywords are ..... . For example:',
   },
   {
     name: 'var',
     text: 'int',
   },
   {
     name: 'var',
     text: ' money;',
   },
   {
     name: 'var',
     text: 'Here, ',
   },
   {
     name: 'strong',
     text: 'This is fine ',
   },
 ]);

 const renderElements = () => {
   let jsx = [];
   let varElements = [];

   data.forEach((item) => {
      if (item.name === 'var') {
       varElements.push(<Text>{item.text}</Text>);
      } else {
       if (varElements.length > 0) {
         jsx.push(<View style={{flexDirection: 'row'}}>{varElements}</View>);
       }
       varElements = [];
       jsx.push(<Text>{item.text}</Text>);
     }
   });

   return jsx;
 };

   return <View>{renderElements()}</View>;
};

export default App;

魔法發生在 renderElements function 內部。

1. let jsx = [] <--- 這是整體生成的 JSX。
2. let varElements = [] <-- 我們在其中臨時存儲重復出現的 var 元素，然后推送到 JSX。
3. 我們用 forEach 循環數組並檢查每個元素，如果元素是 var 類型，那么我們將其添加到varElements ，否則我們檢查是否已經有一些varElements ，如果有，然后我們將它們分組到<View/>中，使用flexDirection:'row'; 並將它們推送到 JSX 數組。 然后我們清空 varElements 數組並將其他類型的元素推送到 JSX。