React Native error: супер-выражение должно быть либо нулевым, либо функцией - PullRequest
Новая
       13

React Native error: супер-выражение должно быть либо нулевым, либо функцией

0 голосов
/ 01 февраля 2020

Я получаю сообщение об ошибке, когда пытаюсь запустить это приложение на моем эмуляторе Android. Я изменил «Компонент» на «React.Component», но затем я получаю другие проблемы. Мои версии React, Node и JS самые новые. Проблема в том, что я новичок и у меня есть этот Код от Viedo, и он не ошибся.

Без React.Component:

Without React.Component

с React.Component:

With React.Component

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  StatusBar,
  Component,
} from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#1e90ff" barStyle="light-content" />,
          <Text style={styles.login}>Login</Text>,
          <TextInput style={styles.input} placeholder="Username" />,
          <TextInput
            style={styles.input}
            placeholder="Password"
            secureTextEntry
          />
        <View style={styles.btnContainer}>
          <TouchableOpacity style={styles.userBtn}>
            <text style={styles.btnText}>Login</text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.userBtn}>
            <text style={styles.btnText}>Text</text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#1e90ff',
  },
  login: {
    textAlign: 'center',
    fontSize: 35,
    margin: 10,
    color: '#fff',
  },
  input: {
    width: '80%',
    backgroundColor: '#fff',
    padding: 10,
    marginBottom: 10,
    height: 30,
  },
  btnContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '90%',
  },
  userBtn: {
    backgroundColor: '#fff',
    padding: 15,
    width: '40%',
    margin: 10,
  },
  btnText: {
    fontSize: 25,
    textAlign: 'center',
    color: '#1e90ff',
  },
});

Может ли кто-нибудь мне помочь?

1 Ответ

0 голосов
/ 01 февраля 2020

1. Ошибка типа: Супер-выражение должно быть либо нулевым, либо функцией

Чтобы исправить это 

import React, { Component } from 'react';

Тогда вы можете использовать 

export default class App extends Component

2. Нарушение инварианта: текстовые строки должны отображаться в компоненте

Чтобы исправить это, удалите , и измените 

<text style={styles.btnText}>Login</text>

на 

<Text style={styles.btnText}>Login</Text>

РЕДАКТИРОВАТЬ 

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#1e90ff" barStyle="light-content" />
        <Text style={styles.login}>Login</Text>
        <TextInput style={styles.input} placeholder="Username" />
        <TextInput
          style={styles.input}
          placeholder="Password"
          secureTextEntry
        />
        <View style={styles.btnContainer}>
          <TouchableOpacity style={styles.userBtn}>
            <Text style={styles.btnText}>Login</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.userBtn}>
            <Text style={styles.btnText}>Text</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...