반응 환경에서 알 수 없는 모듈 "crypto" 필요
리액터네이션을 이용한 간단한 트위터 앱을 쓰고 있어.Twit 모듈을 사용하여 Twitter 피드 및 스트림.아래 코드는 미세한 노드로 작동한다.그러나 내 reaction-native 앱에 포함된 경우 "알 수 없는 모듈 "crypto" 필요" 오류를 확인하십시오.종속성은 myapp->twit->oauth->crypto(노드 v0.12.2의 일부)인 것 같다.반응형 환경에서 작동시킬 수 있는 제안이 있으십니까?
var Twit = require('twit')
var T = new Twit({
consumer_key:''
, consumer_secret:''
, access_token:''
, access_token_secret:''
})
var filtered_tweets=[];
var error;
var isSuccess=false;
function getTweets(searchString){
T.get('search/tweets',{q:searchString, count:100}, getResponse);
}
function getResponse(err,data,response){
if(err) {
handleGetErr(err);
}
handleGetData(data.statuses);
}
function handleGetErr(err){
enter code here
error = err;
}
function handleGetData(data){
data.map(function(tweet){
var twit={
twit:tweet.id,
created_at:tweet.created_at,
text:tweet.text,
retweet_count:tweet.retweet_count,
favorite_count:tweet.favorite_count
};
filtered_tweets.push(twit);
});
console.log(filtered_tweets);
isSuccess=true;
}
getTweets("@sahaswaranamam");
module.exports = getTweets;
![부착][2]
그crypto
모듈은 내장 노드 모듈이다. React Native는 JS를 JavaScriptCore (장치나 시뮬레이터에 있을 때)와 Chrome 자체에서 실행하므로, 내장된 Node.js 모듈에 의존하는 모듈은 작동하지 않는다.자세한 내용은 기본 문서 대응의 JavaScript 런타임 섹션을 참조하십시오.
React Native 앱에 통합하는 것이 얼마나 어려울지는 잘 모르겠지만 Browserify와 같은 브라우저 모듈 번들러들은 종종 이것처럼 핵심 Node.js 모듈의 브라우저 버전을 가지고 있다.
@emby가 제안하는 대로 사용하고 있다면 를 사용할 수 있다.README의 지침:
설치
npm i --save react-native-crypto # install peer deps npm i --save react-native-randombytes react-native link react-native-randombytes # install latest rn-nodeify npm i --save-dev mvayngrib/rn-nodeify # install node core shims and recursively hack package.json files # in ./node_modules to add/update the "browser"/"react-native" # field with relevant mappings ./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify
을 창조할 것이다.shim.js
프로젝트 루트 디렉터리에// index.ios.js or index.android.js // make sure you use `import` and not require! import './shim.js' // ...the rest of your code
그렇지만rn-nodeify
또한 다음과 같이 명시되어 있다.
보다 건전한 접근법을 찾고 있다면 ReactNativify를 확인하십시오.직접 테스트해 본 적은 없지만 필리콘이 기꺼이 도와줄 것 같다.
ReactAntivify를 사용하여 를 생성한 다음 에서 Babel이 다음 번들 종속성을babel-plugin-rewrite-require
:
// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager. All other built-in node
// libraries get rewritten to their browserify counterpart.
[require('babel-plugin-rewrite-require'), {
aliases: {
crypto: 'crypto-browserify',
// ...
},
throwForNonStringLiteral: true,
}]
(참고: 이 2Js 파일 없이도 에서 직접 이 작업을 수행할 수 있음).babelrc
)
(주2: 리액트Nativify가 더 깨끗한 방법이지만, 여전히 배선에 문제가 있음crypto.getRandomValues
RN에서의 생산용.이 질문 참조)
당신은 그것을 사용할 수 있다.rn-nodeify
을 얻기 위한 모듈crypto
리액트레이닝하여
추가하다rn-nodeify
당신께devDependencies
에package.json
:
"devDependencies": {
"rn-nodeify": "^6.0.1"
}
다음 항목을 에 추가하십시오.scripts
동일한 파일의 섹션:
"scripts": {
…
"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
rn-nodeify가 package.json을 수정한다는 점에 유의하십시오.
자세한 내용은 https://www.npmjs.com/package/rn-nodeify를 참조하십시오.
React Native packager는 후드 아래에 있는 Babel을 사용한다.즉, Babel 플러그인을 사용하여 모든 항목을 다시 작성할 수 있다.require('crypto')
로 부르다.require('crypto-browserify')
, 후자가 당신의 안에 설치되어 있다고 가정한다.node_modules
.
2016년 1월 현재 사용가능.babelrc
파일: 선택적 구성을 정의하기 때문에 이 작업은 매우 쉬워진다.먼저 종속성을 설치하십시오.
npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require
그런 다음 플러그 인 구성을.babelrc
파일:
{
"presets": ["react-native"],
"plugins": [
["babel-plugin-rewrite-require", {
"aliases": {
"crypto": "crypto-browserify"
}
}]
]
}
포장기를 다시 시작하면 그것으로 끝이다.
이는 ReactNativify가 사용하는 방식과 동일하지만, 여기서는.babelrc
사용자 지정 변압기를 정의하는 대신언제ReactNativify
작성되었지만, 지원되지 않았기 때문에, 그들은 더 복잡한 해결책을 가지고 가야만 했다.노드 폴리필의 거의 전체 목록은 의 이 파일을 참조하십시오.
내 Ract Native 앱에서 Twilio 패키지를 구현하고, Ract Native가 암호 종속성을 극복하도록 할 때도 같은 문제가 있었다.
주변의 작업으로 나는 별도의 독립형 노드/엑스프레스 앱을 만들어 내 서버 역할을 하고 내가 가지고 있던 트윌리오 로직을 처리하게 되었다.그렇게 해서 나는 나의 React Native 앱에서 Twilio 로직을 모두 제거하고 Node로 옮겼다.그리고 나서 나는 단지 Fetch를 사용해서 Ract Native로 나의 익스프레스 루트에 전화를 걸었고, 그것은 내가 Twilio에서 일어나길 원하는 기능을 촉발시켰다.Fetch에 익숙하지 않은 경우 Fetch in React Native를 사용하여 AJAX 호출하기
게다가, 내 앱을 망가뜨리는 암호 의존성에 대한 나의 질문은 다음과 같다.
아마존-인지-아이덴티티-js는 추가 마법 없이 암호-js 3.3.0을 사용하는 것을 볼 수 있다...만약 그 패키지의 버전이 효과가 있다면, 아마도 그것을 시도해 볼 것이다.
'Programing' 카테고리의 다른 글
Vue 라우터에서 대상 구성 요소를 동적으로 설정하는 방법 (0) | 2022.03.22 |
---|---|
Python의 dritt.keys()는 왜 집합이 아닌 목록을 반환하는가? (0) | 2022.03.22 |
초기 v-선택 값 설정 (0) | 2022.03.22 |
Vue 경로에서 여러 구성 요소를 사용하는 방법 (0) | 2022.03.21 |
세 개 이상의 React 애플리케이션 간에 데이터를 공유하는 방법 (0) | 2022.03.21 |