react-native-elements: значки выдают ошибку Invariant Violation

Я новичок в том, чтобы реагировать на родные, и я столкнулся с проблемой, которую не знаю, как решить. Я создал и начал новый проект следующим образом:

  • создать-реагировать-родное-приложение ProjectName
  • компакт-диск ProjectName
  • пряжа добавить реактивные-родные-элементы@бета
  • запуск нпм

Package.json выглядит так:

 {
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "25.0.0",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^25.0.0",
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-elements": "^1.0.0-beta3"
  }
}

Затем я хотел вставить кнопку с таким значком:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-elements';

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>
        <Button
          raised
          icon={{ name: 'cached' }}
          title='BUTTON WITH ICON' />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

К сожалению, я получаю это сообщение об ошибке:

сообщение об ошибке на iphone

У кого-нибудь есть подсказка, как я могу заставить работать значки? Я уже пытался добавить векторные значки с помощью «yarn add react-native-vector-icons», хотя у меня есть проект create-react-native, но это тоже не сработало.

Благодарю вас!


react-native reactjs create-react-native-app vector-icons
person FBa    schedule 13.03.2018    source источник
comment
Пожалуйста, добавьте сообщение об ошибке в текстовом виде к вашему вопросу   -  person Nico Haase    schedule 13.03.2018

Ответы (1)


arrow_upward
4
arrow_downward

Это должно быть так:

import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
...
<Button
  icon={
    <Icon
      name='arrow-right'
      size={15}
      color='white'
    />
  }
  title='BUTTON WITH ICON'
/>
person SmoggeR_js    schedule 13.03.2018
comment
Большое тебе спасибо. Это решило мою проблему. Я просто взял пример карты из react-native-elements в качестве примера, и они по-разному интегрировали кнопку. :) - person FBa; 13.03.2018