Question

我是React Native的新用户，我正在尝试为测试应用制作自定义组件，但是我在从Expo上加载应用时遇到此错误：

未捕获错误：java.lang.Exception：Bundle返回码：500。

图片：https://i.imgur.com/wRTxa8V.jpg

（发布图片的声誉不够，抱歉）

我的项目结构基本如下：

/ TestApp
- App.js
- / SRC
  - /组件
    - CustomButton.js
    - CustomButton.style.js

CustomButton.style.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  buttonContainer: {
    width: 100,
    height: 20,
    alignItems: 'center',
    border: '1px solid white',
    backgroundColor: 'skyblue'
  },
  buttonText: {
    color: 'white',
    fontSize: 20
  }
});

CustomButton.js

import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import styles from './CustomButton.style';

export default class CustomButton extends Component {
  constructor(props){
    this.props = props;
  }

  render(){
    return(
      <TouchableOpacity
        style={styles.buttonContainer}
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>
          {this.props.title}
        </Text>
      </TouchableOpacity>
    );
  }
}

App.js

import React, { Component } from 'react';
import { Alert, AppRegistry, StyleSheet, View, Text } from 'react-native';
import CustomButton from './src/components/CustomButton';

export default class TestApp extends Component{
  render(){
    return(
      <CustomButton/>
    );
  }
}

我非常确定问题是当我尝试导入自定义组件时，因为我在评论该行时会加载该应用。我已经阅读了一些有关此问题的问题，这通常是因为路径不正确，但我无法弄清楚我的路径有什么问题。提前谢谢。

Answer 1

代码中StyleSheet的导入错误，必须从react-native导入

import {StyleSheet} from 'react-native'

同样constructor不在super类

之前

您需要添加

constructor(props){
    super(props) <== If you want to access props
    this.props = props;
  }

样式也无效，因为border没有属性，您可以查看this以获取更多信息。

React Native：加载自定义组件时出错500

1 个答案: