реагировать родной материал дизайн терпит неудачу в AVD - PullRequest
Новая
       8

реагировать родной материал дизайн терпит неудачу в AVD

0 голосов
/ 19 октября 2018

Я только начинаю с React Native и Material Design.

Я сделал очень простое приложение, используя шаблон react-native init.

Я также сделал следующее:

  • run npm install --save react-native-material-design react-native-vector-icons
  • добавлено apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" в ./android/app/build.gradle
  • скопировано MaterialIcons.ttf из реактивного элемента native-material-designмодуль для ./android/app/src/main/assets/fonts

Это мое очень простое приложение: 

import React, {Component} from 'react';
import {Alert, Image, StyleSheet, Text, View} from 'react-native';
import {Button, Card} from 'react-native-material-design';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.brandBar}>
          <Text style={styles.brand}>trackr</Text>
        </View>
        <Card>
          <Card.Media image={<Image source="require('./assets/kitten.jpg')" />} overlay />
          <Card.Body>
            <Text>Lorem ipsum dolor sit amet...</Text>
          </Card.Body>
          <Card.Actions position="right">
            <Button value="ACTION" onPress={()=>Alert.alert('clicked!')} />
          </Card.Actions>
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  brandBar: {
    flex: 1,
    backgroundColor: 'lightblue',
    padding: 10,
  },
  brand: {
    fontSize: 24,
    color: 'white',
  },
});

Когда я запускаю это приложение, используя react-native run-android, я получаю следующую ошибку в моем AVD: 

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false&deltaBundleId=99a973396aff78b3

Body:
{"type":"TransformError","lineNumber":60,"column":16,"filename":"node_modules/react-native-material-design/node_modules/react-native-vector-icons/lib/icon-button.js","errors":[{"description":"SyntaxError: /home/brian/gitrepos/brianemilius/trackrNative/node_modules/react-native/node_modules/react-native-material-design/node_modules/react-native-vector-icons/lib/icon-button.js: A trailing comma is not permitted after the rest element (60:16)\n\n  58 |         iconStyle,\n  59 |         children,\n> 60 |         ...props,\n     |                 ^\n  61 |       } = this.props;\n  62 | \n  63 |       let iconProps = pick(props, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');","filename":"node_modules/react-native-material-design/node_modules/react-native-vector-icons/lib/icon-button.js","lineNumber":60}],"name":"SyntaxError","message":"SyntaxError: /home/brian/gitrepos/brianemilius/trackrNative/node_modules/react-native/node_modules/react-native-material-design/node_modules/react-native-vector-icons/lib/icon-button.js: A trailing comma is not permitted after the rest element (60:16)\n\n  58 |         iconStyle,\n  59 |         children,\n> 60 |         ...props,\n     |                 ^\n  61 |       } = this.props;\n  62 | \n  63 |       let iconProps = pick(props, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');","stack":"SyntaxError: /home/brian/gitrepos/brianemilius/trackrNative/node_modules/react-native/node_modules/react-native-material-design/node_modules/react-native-vector-icons/lib/icon-button.js: A trailing comma is not permitted after the rest element (60:16)\n\n  58 |         iconStyle,\n  59 |         children,\n> 60 |         ...props,\n     |                 ^\n  61 |       } = this.props;\n  62 | \n  63 |       let iconProps = pick(props, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');\n    at _class.raise (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:3939:15)\n    at _class.unexpected (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:5248:16)\n    at _class.parseObj (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:6689:18)\n    at _class.parseBindingAtom (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:5505:21)\n    at _class.parseVarHead (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:7797:20)\n    at _class.parseVarHead (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:2517:42)\n    at _class.parseVar (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:7773:12)\n    at _class.parseVarStatement (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:7606:10)\n    at _class.parseStatementContent (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:7203:21)\n    at _class.parseStatement (/home/brian/gitrepos/brianemilius/trackrNative/node_modules/@babel/parser/lib/index.js:7153:17)"}
processBundleResult
    BundleDownloader.java:296
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:174
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1162
run
    ThreadPoolExecutor.java:636
run
    Thread.java:764
...