React-Native의 문자열을 구성 요소로 변경하는 방법은 무엇입니까?

Question

나는 var str = '<Text> something </Text>'을 가지고 있는데,이를 컴포넌트로 렌더링 할 수 있습니까?

나는 다음과 같은 시도했지만 작동하지 않습니다 :(

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

반응에 dangerouslySetInnerHTML과 비슷한이 작업을 수행 할 수있는 방법 있나요? 내 프로젝트에서

, 나는에 의해 JSON을 얻을 나는 정규 표현식에 의해 등등 Text에 html 요소 p 또는 다른 사람을 대체 할 단지

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

처럼 가져하지만, result는 문자열입니다.

나는 또한 react-native-html-render을 시도했지만 문서는 이해할 수 없으며 잘 수행되지 않습니다.

Answer 1

응답의 내부 HTML을 RN Text 요소로 변환하는 함수를 만들 수 있습니다. JSX이 React.createElement 전화로 transpiled 해짐에 따라

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> 

Answer 2

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

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

Answer 3

국가의 일부로 설정하십시오 (예 : this.state.str). 생성자에서 기본값 (예 : this.state = {str: "test"})을 지정합니다. 그런 다음 가져 오기를 수행하는 함수에서 setState을 입력하여 값을 변경하십시오 (예 : this.setState({str: response})). 마지막으로 렌더에서 다음을 수행하십시오.

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

Answer 4

은 불행히도 필요태그는 컴파일 시간에 포함된다. 또는 직접 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 런타임 (가능성)에 존재하지 않습니다 노드 종속성에 필요하지 않는 한 기술적으로, 작동합니다.

Answer 5

내 요구 사항은 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> 
     ); 

그것은 당신이 내가 텍스트와 링크처럼 사용하고,뿐만 아니라 그 스타일을 기대하는 모든 구성 요소를 선언하는 것은 매우 쉽습니다.