Question

React native cli全球安装版本：2.0.1

然后我使用react-native init project_name设置了一个包含本机模块的项目。

我接着尝试使用yarn add react-native-elements@beta然后yarn add react-native-vector-icons然后react-native link react-native-vector-icons安装React Native Elements UI Toolkit，根据此处的文档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>
    );
  }
};

这会引发以下错误

Answer 1

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

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

看看它是如何发展的。

Answer 2

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

您可以关注this和this github问题以获取更多参考资料。

解决问题的方法是

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

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

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

务必重新启动打包器。

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

无法安装本机反应原生元素

3 个答案: