如何將React-Native中的字符串更改爲組件？

我有一個var str = '<Text> something </Text>'，我可以隨心所欲地顯示爲一個組件？如何將React-Native中的字符串更改爲組件？

我嘗試以下，但它不工作:(

var str = '<Text>test</Text>' 
    render(){ 
     return(
      <Text>{str}</Text> 
     ) 
    }

有沒有辦法做到這一點，類似於陣營dangerouslySetInnerHTML？

在我的項目，我用得到JSON取就像

{ 
    content:'<p>example</p>' 
}

我想通過正則表達式的HTML元素p或他人更換成Text等，但結果是一個字符串。

我也試過react-native-html-render但它的文檔是無法理解，並未表現良好。

來源

2017-03-07 MonkeyFigaro

這個問題就是這個問題http://stackoverflow.com/questions/41139643/react-native-how-to-change-text-value-dynamically/41139864#41139864 –

您可以創建一個轉換你進入一個RN文本元素響應的內部HTML功能。

var str = '<p>something here</p>' 

var convertToText = (response) => { 
    var text = response.split(/[^A-Za-z]/).filter(x => x !== '').slice(1, -1).join(' ') //gives "something here"; 
    return <Text>text</Text>; 
} 

convertToText(str) === <Text>something here</Text>

來源

2017-03-07 17:40:28

謝謝，我已經編輯了我的問題，能否幫助我解決此問題？再次感謝。 – MonkeyFigaro

已更新我的答案，基本上可以使用此功能將它們轉換爲文本元素，但如果您需要基於響應中的內容的不同元素，則需要添加一些更多配置。 –

其實我意識到這隻適用於一個單詞元素，只是更新它來處理任何數量的單詞。 –

var str = <Text>test</Text>; 

    render() { 
    return (
     <View style={styles.container}> 
     {str} 
     </View> 
    ); 
    }

來源

2017-03-07 16:04:06 vinayr

THX頗爲相似，但實際上它是一個一個抓取的響應，所以我不能只是像你說的那樣設置str ... – MonkeyFigaro

將其設置爲您所在州的一部分（例如，this.state.str）。在你的構造函數中，給它一個默認值（例如，this.state = {str: "test"}）。然後在你的功能，它的獲取，做setState更改值（例如，this.setState({str: response})）。最後，在渲染，這樣做：

render() { 
    return (
     <View style={styles.container}> 
     <Text>{this.state.str}</Text> 
     </View> 
    ); 
    }

來源

2017-03-07 17:30:11 TheJizel

不幸的是，標籤需要在編譯時被合併，如JSX變得transpiled到React.createElement電話。或者你可以自己寫React.createElement電話。

例如，你可以創建一個解析器比能走的JSX樹在您的服務器響應。喜歡的東西

function parseResponseIntoJSXTree (string) { 
    // very psuedo example: 
    var type = parseJSXTag(string) // produces `Text` 
    var props = parseJSXTagProps(string) // produce any attribute=values 
    var innerContent = parseJSXContent(string) // produces 'something' 
    return React.createElement(type, props, children) 
}

這只是表面的劃痕，因爲你需要走的樹，如果有子元素除根節點更深。

想我恐怖，可怕回答？包括在你的包babel做：

var renderableContent = require('babel-core', {presets: ['react-native']) 
    .transform('<Text>something</Text>')

注 - 我非常不鼓勵這樣，但它在技術上會工作，除非babel要求上，不會在運行時（可能）存在節點依存關係。

來源

2017-03-08 02:04:58 Atticus

謝謝！但是我寫這個解析似乎有點困難。你說過的_可怕的答案......它可能是一種可用的方式來考慮。再次感謝！ – MonkeyFigaro

我的要求是類似的，使動態畫面上任意部件，根據JSON服務器響應。下面是我做的：

const blockContent = [ 
    { 
    type: 'text', 
    content: 'Some title', 
    size: 20, 
    color: 'black', 
    wrapperPadding: 10 
    }, 
    { 
     type: 'text', 
     wrapperPadding: 10, 
     size: 16, 
     color: 'red', 
     content: 'Some text. Some text. Some text. Some text. Some text. ' 
    }, 
    { 
     type: 'text', 
     wrapperPadding: 10, 
     size: 16, 
     color: 'red', 
     content: 'Some text. Some text. Some text. Some text. Some text. ' 
    }, 
    { 
     type: 'link', 
     content: 'Some link', 
     size: 16, 
     color: 'blue', 
     wrapperPadding: 10, 
     url: 'http://www.google.com' 
    } 
]; 

    class CustomBlock extends Component { 

     openURL (url) { 
     Linking.openURL(url).catch(err => console.error('An error occurred', err)); 
     } 

     render() { 
     return (
      <View style={styles.container}> 
      {blockContent.map((item) => { 
       switch (item.type) { 
       case 'text': 
        return (
        <View style={{padding: item.wrapperPadding}}> 
         <Text style={{fontSize: item.size, color: item.color}}>{item.content}</Text> 
        </View> 
       ); 
       case 'link': 
        return (
        <TouchableHighlight style={{padding: item.wrapperPadding}} underlayColor="lightgrey" onPress={this.openURL.bind(this, item.url)}> 
         <Text style={{fontSize: item.size, color: item.color}}>{item.content}</Text> 
        </TouchableHighlight> 
       ); 
       } 
      })} 
      </View> 
     );

這是很容易聲明您希望使用像我的文字和鏈接一樣，和他們的風格，以及所有組件。

來源

2017-08-23 16:52:23 zoxxx

如何將React-Native中的字符串更改爲組件？

回答

相關問題