无法安装react native和react native元素

Question

React native cli globally installed version : 2.0.1

I then used react-native init project_name to set up a project with the native modules.

I then tried installing React Native Elements UI Toolkit using yarn add react-native-elements@beta followed by yarn add react-native-vector-icons and then react-native link react-native-vector-icons as per the docs here React Native Elements Docs

The install completed successfully with a package.json that looks like this

{
"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"
}
}

I have used the following as my default component

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>
    );
  }
};

This throws the following error

Answer 1

Doesn't look like you can pass a component to the icon prop . Change your Button to something along these lines:

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

See how it goes from there.

Answer 2

This is an error in metro bundler around handling paths to direct files. The issue and workarounds have been logged over at the react-native repo.

You can follow this and this github issue for further references.

The work around for solving it is

Create a rn-cli.config.js file in your root directory and paste in the following code.

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

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

Be sure to restart the packager.

Answer 3

There are lots of problem in the code just replace your code with this:

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>
    );
  }
};