React-native : React-native에서 jsx로 typescript .tsx 파일을 사용 (및 변환)하는 방법?

Question

나는 reactjs + typescript에서 오는 React-native를 처음 사용합니다. 상당히 간단한 프로젝트 테스트를 설정하고이 기술이 어떻게 작동하는지 확인하려고합니다. VS 코드를 사용하고 있습니다.

기본 자습서에 따라 프로젝트를 설정 했으므로 Visual Studio Android 에뮬레이터에서 실행할 수 있습니다.

이제 custom.tsx 파일 (profile.tsx)을 만드는 방법을보고 렌더링 함수을 작성하고 색인 페이지 (index.android.js)에 표시하십시오.

그래서 나는 .tsx 파일을 만들 :이 파일을 컴파일 및 해당 profile.js를 생성 할 수 있습니다 VS 코드를 사용하여

export class Profile extend React.Component { 

     render(){ 
      return <View> this is the profile view </View> 
     } 
} 

(I 파일의 시작 부분에 다양한 import 문을 생략 한) 및 profile.js.map 파일.

profile.js의 내용은 다음과 같습니다 런타임에서

"use strict"; 
const react_1 = require('react'); 
const react_native_1 = require('react-native'); 

... 

class Profile extent react_1.Component { 

    render(){ 
      return react_1.default.createElement(react_native_1.View, null, "this is the profile view"); 
    } 
} 

라인 react_1. 이 메시지와 불면default.createElement :

UNDEFINE이 "기본"속성이 있습니다

(react_1.default.createElement 평가) 객체가 아닌, 내가 그것을하지 무슨.

그렇다면 일부 jsx 코드가 포함 된 .tsx 파일을 만들고 반응이 가능한 응용 프로그램에서 올바르게 사용하기 위해 올바르게 변환 할 수 있습니까?

• P.S : 이것은 내 tsconfig.json 파일입니다, 내가 jsx =으로 jsx을 활성화 한

어떤 도움, 제안, 방향은 크게 감사하겠습니다을 "반응". 감사합니다.

Answer 1

지금 TSC는 ES6 모듈 구문을 번역하고 있으며 나중에 JavaScript 엔진은 기본 내보내기 (module.exports와 유사)가 필요하지 않습니다. 이는 존재하지 않습니다. ES6 대상 및 모듈로 TSC를 구성해야합니다.

다음과 같이 당신의 tsconfig.json 파일의 컴파일러 옵션을 업데이트하십시오 : ES6 대상 (그것으로 ES6에 모듈 기본값)와

{ 
    "compilerOptions": { 
    "target": "es6", 
    "allowJs": true, 
    "jsx": "react", 
    "sourceMap": true, 
    "noImplicitAny": false 
    } 
} 

, 프로필 클래스 transpiled해야하기 :

class Profile extends Component { 

    render(){ 
      return React.createElement(View, null, "this is the profile view"); 
    } 
} 

또한 react과 react-native 유형 정의를 설치하는 것을 잊지 마십시오. 원사 (최신 반응 고유 번호가 선호 됨) 또는 npm : yarn add @types/react-native @types/react -D 또는를 사용하십시오.

Answer 2

문제는 구성 요소를 가져 오지 않고 *를 사용하여 해결됩니다."수입에서 *"반응 "에서"반응 ";"

이 문제는 JS에서 tsc와 함께 컴파일 한 것일 수 있습니다.