네이티브: require()를 다이내믹 문자열로 리액트하시겠습니까?

네이티브: require()를 다이내믹 문자열로 리액트하시겠습니까?

React Native와 관련된 문제에 대해 몇 가지 글을 읽은 적이 있습니다.require()다음과 같은 동적 리소스가 필요할 때 기능을 수행합니다.

동적(페일):

urlName = "sampleData.json";
data = require('../' + urlName);

vs. 정적(성공):

data = require('../sampleData.json');

일부 스레드에서는 이것이 React Native의 버그라고 읽었고, 다른 스레드에서는 이것이 기능이라고 읽었습니다.

기능 내에서 동적 리소스를 필요로 하는 새로운 방법이 있습니까?

관련 투고(모두 리액트 타임으로 꽤 오래됨):

• React 네이티브의 로컬 json 파일에서 텍스트 가져오기
• React Native - 디렉토리의 파일을 동적으로 나열/요구
• React Native - 이미지 요구 모듈(동적 이름을 사용)
• React Native: 동적 URL에서 require(경로)를 사용하는 방법

듣던 대로 리액션의require()static url만 사용하고 변수는 사용하지 않습니다. 즉,require('/path/file'), github에 관한 이 문제와 다른 솔루션에 대한 이 문제를 살펴보세요.다른 방법이 몇 가지 있습니다.

const images = {
profile: {
    profile: require('./profile/profile.png'),
    comments: require('./profile/comments.png'),
},
   image1: require('./image1.jpg'),
   image2: require('./image2.jpg'),
};

export default images;

그리고나서

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

이 대답에서

제 해결책은 이렇습니다.

세우다

파일 구조:

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

인index.js다음과 같은 것이 있습니다.

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

인마이SearchableList.js컴포넌트를 Images 컴포넌트를 다음과 같이 Images 컴포넌트를 Import했습니다.

import Images from './assets/images';

그런 다음 새로운 기능을 만들었습니다.imageSelect내 컴포넌트:

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

내 컴포넌트에서는render나는 이것을 새로운 기능이라고 부른다.imageSelect의 값을 기반으로 원하는 이미지를 동적으로 할당하는 함수입니다.this.state.network:

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

imageSelect 함수에 전달되는 값은 임의의 다이내믹 문자열일 수 있습니다.일단 주(州)에 세팅하고 통과시킨 것뿐이에요.

이 답변이 도움이 되길 바랍니다.:)

이 글을 읽고 기존 답을 사용할 수 없는 사람을 위해 대안이 있습니다.

먼저 제 시나리오를 설명하겠습니다.여러 패키지가 포함된 모노 레포(대형 리액션 네이티브 앱)가 있습니다.중앙 레지스트리를 매직파일에 보관하지 않고 i18n용 로케일파일을 다이나믹하게 Import 하고 싶다.같은 모노레포에서 작업하는 팀이 여러 개 있을 수 있습니다.DX는 패키지 개발자가 기존의 폴더에 로컬 파일을 추가하는 것만으로 충분합니다.{{packageName}}/locales/en.jsoni18n의 핵심 기능을 사용할 수 있습니다.

이상적이지 않은 몇 가지 솔루션 끝에 저는 https://github.com/kentcdodds/babel-plugin-preval을 우리에게 이상적인 솔루션으로 선정하게 되었습니다.저는 이렇게 했습니다.

const packageEnFiles = preval`
  const fs = require('fs');
  const path = require('path');

  const paths = [];

  const pathToPackages = path.join(__dirname, '../../../../packages/');
fs.readdirSync(pathToPackages)
    .filter(name => fs.lstatSync(path.join(pathToPackages, name)).isDirectory())
    .forEach(dir => {
      if (fs.readdirSync(path.join(pathToPackages, dir)).find(name => name === 'locales')) {
        const rawContents = fs.readFileSync(path.join(pathToPackages, dir, 'locales/en.json'), 'utf8');
        paths.push({
          name: dir,
          contents: JSON.parse(rawContents),
        });
      }
    });

  module.exports = paths;
`;

그런 다음 이 목록을 반복하고 로컬 파일을 i18next에 추가할 수 있습니다.

packageEnFiles.forEach(file => {
  i18n.addResourceBundle('en', file.name, file.contents);
});

로컬로 저장된 여러 영상 간에 전환해야 하는 경우 다음과 같은 방법도 사용할 수 있습니다.

        var titleImg;
        var textColor;
        switch (this.props.data.title) {
        case 'Футбол':
            titleImg = require('../res/soccer.png');
            textColor = '#76a963';
            break;
        case 'Баскетбол':
            titleImg = require('../res/basketball.png');
            textColor = '#d47b19';
            break;
        case 'Хоккей':
            titleImg = require('../res/hockey.png');
            textColor = '#3381d0';
            break;
        case 'Теннис':
            titleImg = require('../res/tennis.png');
            textColor = '#d6b031';
            break;
        }

에서는 변수를 합니다.titleImg ★★★★★★★★★★★★★★★★★」textColor품품 르은 제가 나나에 .render()★★★★★★ 。

「 」, 「 」의 되었습니다.require()는 정적 문자열로 시작할 때 작동합니다.를 들어, 「」입니다.require("./" + path)만, 「」는 동작합니다require(path)그렇지 않다.

심플하고 동적인 이미지(필요한 사용)

배열 예(상태로)

this.state={
       newimage: require('../../../src/assets/group/kids_room.png'),
       randomImages=[
         {
            image:require('../../../src/assets/group/kids_room.png')
          },
         {
            image:require('../../../src/assets/group/kids_room2.png')
          }
        ,
         {
            image:require('../../../src/assets/group/kids_room3.png')
          }
        
        
        ]

}

이미지를 트리거합니다(버튼을 누를 때와 같습니다(이미지 랜덤 번호 0-2를 선택합니다).

let setImage=>(){

this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)];
})
}

보다

<Image
        style={{  width: 30, height: 30 ,zIndex: 500 }}
        
        source={this.state.newimage}
      />

얘들아, 내가 다른 방법을 찾아봤는데 그건 못생겼지만 효과가 있어.동적으로 이미지를 표시합니다.URL을 상태로 저장하는 대신 전체 JSX를 저장합니다.예를 들어 다음과 같습니다.

state = {
  image: []
};

대신

let imageURL = `'../assets/myImage.png'`
this.state.image = imageURL

사용하다

let greatImage = (<Image source={require(../assets/myImage.png)}></Image>)
this.state.image = greatImage

JSX에서 렌더링하려면

{this.state.image}

변수에서 이미지를 스타일링할 수도 있습니다.이미지를 역동적으로 표현하기 위해 if 스테이트먼트를 사용해야 했고, 2시간 동안 머리를 깨트린 후 이렇게 문제를 해결했습니다.내가 말했듯이 그건 추하고 아마 틀렸을거야.

웹 팩과 같은 모듈번들러를 사용하고 있습니까?

여러분도 됩니다.require.ensure()

참조: https://webpack.js.org/guides/code-splitting/ #dynamic-displays

문서를 읽어보니 유효한 답을 찾았고 동적 이미지를 사용할 수 있습니다. 문서에서는 네트워크 이미지라고 합니다.

https://facebook.github.io/react-native/docs/images#network-images

이 파일을 다른 파일 형식에 적용할 수 있을지 확실하지 않지만 목록에 이미지 유형이 아닌 경우 필요합니다.

uri: call을 사용해야 합니다.

data = {uri: urlName}

저는 이걸로 동적으로 작동하는 이미지를 얻었어요.

<Image source={{uri: image}} />

Android의 경우 이 스레드에 나와 있는 솔루션을 사용해 보십시오.이것으로 문제가 해결되었습니다만, 안타깝게도 안드로이드 전용입니다.

, 실행해 .react-native run-android 추가된 이미지가 앱에 되지 않습니다그렇지 않으면 추가된 이미지가 앱에 나타나지 않습니다.

이것은 효과가 있는 것 같습니다.

const {
      messages,
    } = require(`../${dynamicPath}/messages.specific`);

언급URL : https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string