從字符串變量反應原生渲染組件

Question

或者問題應該是，如何將字符串轉換為 JSX？

無論如何，我正在嘗試對我的 react native 應用程序進行性能破解，這需要我從字符串變量呈現 React 本地組件。

例如，

let item = "<View>
  <Text>
      This is an item
  </Text>
</View>";

現在在我的渲染函數中，我想像這樣渲染它：

render() {
    return (
      <View>
        {item}
      </View>
    );
}

就像現在一樣，如果我嘗試運行應用程序，它會給出錯誤，因為我試圖在View組件中呈現文本。 如果我嘗試在呈現之前將項目包裝在文本中，它只會在屏幕上將項目呈現為純文本，所有<View>和<Text>標簽都作為字符串。

然后我該如何渲染它，以便字符串中的標簽表現得像普通的 React Native 組件，而不是僅僅顯示為字符串？

我已經搜索了所有但沒有找到解決方案。

我將不勝感激任何建議。

Answer 1

如果放置對象而不是字符串，則可以在視圖內部輕松設置它。 但是，如果要使用字符串，則必須編寫一個轉換器，並將每個元素提取為字符串，然后檢查並轉換為等效視圖。
如果您的視圖有道具，那么您還必須將其轉換（這會有點困難！）

Answer 2

嘗試以下兩個軟件包之一：

https://www.npmjs.com/package/acorn-jsx

兩者都允許動態地將字符串解析為jsx（沒有機會在RN中進行測試，但是對於Web中的React可以正常使用）

Answer 3

我認為這個問題的唯一解決方案是像這樣聲明你的變量：

var str = <Detail_page1/>

然后用這樣的視圖包裝它：

<View> {str} </View>