无法使用反应原生元素安装反应原生答案

【问题标题】：Unable to install react native with react native elements无法使用反应原生元素安装反应原生
【发布时间】：2018-02-22 20:11:33
【问题描述】：

React Native cli 全局安装版本：2.0.1

然后我使用react-native init project_name 设置了一个带有原生模块的项目。

然后我尝试安装React Native Elements UI Toolkit，使用yarn add react-native-elements@beta，然后是yarn add react-native-vector-icons，然后是react-native link react-native-vector-icons，按照此处的文档React Native Elements Docs

安装成功完成，带有如下所示的 package.json

{
"name": "project_react_native",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest"
},
"dependencies": {
  "react": "16.2.0",
  "react-native": "0.53.3",
  "react-native-elements": "^1.0.0-beta2"
  "react-native-vector-icons": "^4.5.0"
},
"devDependencies": {
 "babel-jest": "22.4.0",
 "babel-preset-react-native": "4.0.0",
 "jest": "22.4.0",
 "react-test-renderer": "16.2.0"
},
"jest": {
 "preset": "react-native"
}
}

我使用以下作为我的默认组件

import React, {Component} from 'react';
import {View} from 'react-native';
import {Button} from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class App extends Component {
render() {
    return (
        // Try setting `flexDirection` to `column`.
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{width: 50, height: 50, backgroundColor: 
      'powderblue'}}/>
            <Button
                icon={
                    <Icon
                        name='arrow-right'
                        size={15}
                        color='white'
                    />
                }
                text='BUTTON WITH ICON'
            />
        </View>
    );
  }
};

这会引发以下错误

【问题讨论】：

标签： javascript android reactjs react-native yarnpkg

【解决方案1】：

Doesn't look like you can pass a component to the icon prop。将您的 Button 更改为以下内容：

<Button
  icon={{
      name: 'arrow-right', 
      type: 'font-awesome', 
      buttonStyle: styles.someButtonStyle 
  }}
  text='BUTTON WITH ICON'
/>

看看它是如何从那里开始的。

【讨论】：

【解决方案2】：

这是 Metro 捆绑器中围绕处理指向文件的路径的错误。该问题和解决方法已记录在 react-native repo 中。

您可以关注this 和this github issue 以获取更多参考。

解决这个问题的方法是

在你的根目录中创建一个rn-cli.config.js 文件并粘贴以下代码。

const blacklist = require('metro/src/blacklist')

module.exports = {
  getBlacklistRE() {
   return blacklist([/react-native\/local-cli\/core\/__fixtures__.*/])
 },
}

一定要重启打包器。

【讨论】：

【解决方案3】：

代码中有很多问题只需将您的代码替换为：

import React, {Component} from 'react';
import {View} from 'react-native';

import {Button, Icon} from 'react-native-elements';


export default class App extends Component {
render() {
    return (
        // Try setting `flexDirection` to `column`.
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
            <Button
                icon={{  
                        name:'arrow-right',
                        size:15,
                        type: 'font-awesome',
                        color:'white',
                }}
                title='BUTTON WITH ICON'
            />
        </View>
    );
  }
};

【讨论】：