@ expo/vector-icons가 하위 폴더에서 실행 중일 때로드되지 않았습니다

Question

나는을 엑스포와 함께 monorepo 설정에 사용하려고합니다. 서브 폴더 app/에서 응용 프로그램을 시작하고 @expo/vector-icons을 가져올 때 글꼴 패밀리가 없다는 오류가 발생합니다. 내가 주 src/ 폴더에 응용 프로그램을 시작하는 경우

"fontFamily" 'material' is not a system font and has not been loaded 
through Expo.Font.loadAsync. 

는 아이콘 잘로드합니다.

나는 rn-cli.config.js을 구성하여 다른 종속성에 맞게 응용 프로그램을 컴파일하고 올바르게 실행합니다. 내 프로젝트는 monorepo처럼 설정되어 있으므로 repo에서 여러 기본 응용 프로그램을 사용할 수 있습니다.

src/ 
    MainApp.js 
    package.json 
    app/App.js 
    app/app.json 
    app/package.json 
    app/rn-cli.config.js 
    ... 

나는 아무 소용 몇 가지를 시도했다 :

• 가 app.json 파일에 "assetExts": ["ttf"] 설정 하위 폴더 package.json
• 에 @expo/vector-icons를 설치합니다. (주로 신선한 creat-react-native-app에서)

내 코드 :

응용 프로그램/App.js

export { default } from "../MainApp"; 

응용 프로그램/app.json

{ 
    "expo": { 
    "sdkVersion": "22.0.0", 
    "react": "16.0.0-beta.5" 
    } 
} 

응용 프로그램/package.json

{ 
    "private": true, 
    "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 
    "scripts": { 
    "native": "react-native-scripts start" 
    }, 
    "dependencies": { 
    "@expo/vector-icons": "^6.2.1", 
    "expo": "^22.0.0", 
    "react-native": "^0.49.0", 
    "react-native-scripts": "1.7.0" 
    } 
} 

응용 프로그램/RN-cli.config.js

const blacklist = require("metro-bundler/src/blacklist"); 
const path = require("path"); 

const roots = [process.cwd(), path.resolve(__dirname, "..")]; 

const config = { 
    getProjectRoots:() => roots, 

    /** 
    * Specify where to look for assets that are referenced using 
    * `image!<image_name>`. Asset directories for images referenced using 
    * `./<image.extension>` don't require any entry in here. 
    */ 
    getAssetRoots:() => roots, 

    /** 
    * Returns a regular expression for modules that should be ignored by the 
    * packager on a given platform. 
    */ 
    getBlacklistRE:() => 
    blacklist([ 
     // Ignore the local react-native so that we avoid duplicate modules 
     /\/app\/node_modules\/react-native\/.*/ 
    ]) 
}; 

module.exports = config; 

package.json

{ 
    "name": "react-native-app", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "react-native-scripts": "1.7.0" 
    }, 
    "scripts": { 
    "native": "cd app && yarn native" 
    }, 
    "dependencies": { 
    "@expo/vector-icons": "^6.2.1", 
    "expo": "^22.0.0", 
    "react": "16.0.0-beta.5", 
    "react-native": "^0.49.0" 
    } 
} 

MainApp.js는

import React from "react"; 
import { StyleSheet, Text, View } from "react-native"; 
import MaterialIcons from "react-native-vector-icons/MaterialIcons"; 

export default class App extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text>Open up App.js to start working on your app!</Text> 
     <Text>Changes you make will automatically reload.</Text> 
     <Text>Shake your phone to open the developer menu.</Text> 
     <MaterialIcons name="search" color="black" size={32} /> 
     <MaterialIcons name="location-searching" color="black" size={32} /> 
     </View> 
    ); 
    } 
} 
const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: "#fff", 
    alignItems: "center", 
    justifyContent: "center" 
    } 
}); 

Answer 1

나는 두 개의 다른 엑스포 모듈을 가지고 있었다. 하위 폴더에있는 파일을 제거하면 작동됩니다.

Answer 2

나는 반응 네이티브 꽤 새로운 오전,하지만 난했다 비슷한 문제, 나는 엑스포 아이콘을 설치하지 않고 해결하고 정상적으로 사용하여 해결했습니다. 그래서 내 package.json에 나는

"react-native-vector-icons": "^4.4.2", 

을 가지고 있고 내가 좋아하는 글꼴을 가져 :이 완벽한 솔루션입니다 내기,하지만 엑스포로 바로 것들을 쉽게, 내가 돈을 만들 수있는 도구입니다

import Icon from 'react-native-vector-icons/FontAwesome'; 

) 다른 도구를 사용하는 대신 작동하는 것을하는 것이 좋지 않다는 것을 느낀다.)