javascript - ReferenceError:样式未定义

为什么会出现错误：“ ReferenceError：未定义样式”？

我尝试了import { MyModal } from './src/components/MyModal'，但随后出现错误：
不变违反：不变违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

App.js

import MyModal from './src/components/MyModal'

class Home extends Component {
   constructor(props) {
  super(props)

  this.state = {
      isModalVisible: false
   }
  }

   doSomething(){
     //
   }

   render(){
        return (
          <View style={styles.contentContainer}
            <Modal transparent={true}
                        visible={this.state.isModalVisible}
                        onRequestClose={() => this.doSomething()}
                        animationType='fade'>
                           <MyModal changeModalVisibility = {this.doSomething} />
                  </Modal>
          </View>

    )
  }
}

   const styles = StyleSheet.create({
    contentContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
   });

MyModal.js

export default class MyModal extends Component {

    constructor(props) {
        super(props)

        this.state = {
          width: Dimensions.get('window').width
        };

        Dimensions.addEventListener('change', (e) => {
          this.setState(e.window);
        })
    }


   close = () => {
     this.props.doSomething();
   }



    render() {
       return(

             <TouchableOpacity activeOpacity={1} disabled={true} style={styles.contentContainer}>
                 <View style={[styles.modal, {width: this.state.width}]}>
                     <View style={styles.textView}>
                         <Text style={[styles.text, {fontSize: 16}]}> Modal Header </Text>
                     </View>
                     <View style={style.buttonsView}>
                         <TouchableHighlight onPress={() => this.close()} style={styles.touchable}>
                             <Text style={[styles.text, {color: 'orange'}]}> </Text>
                         </TouchableHighlight>
                     </View>
                 </View>
             </TouchableOpacity>
       )
    }
}




const styles = StyleSheet.create({
    contentContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    modal: {
      height: 150,
      paddingTop: 10,
      alignSelf: 'center',
      alignItems: 'center',
      textAlign: 'center',
      borderRadius: 10,
      backgroundColor: 'white'
    },
    text: {
      margin: 5,
      fontSize: 16,
      fontWeight: 'bold'
    },
    touchable: {
      flex: 1,
      backgroundColor: 'white',
      paddingVertical: 10,
      alignSelf: 'stretch',
      alignItems: 'center',
      borderRadius: 10
    }


  });

最佳答案

对于样式错误，将style.buttonsView替换为styles.buttonsView中的MyModal。

对于Invariant Violation错误，您正在将MyModal导出为默认导出，但试图将其导入，就好像它是命名导出一样。

更换：

import {MyModal} from './MyModal';

带有：

import MyModal from './MyModal';

关于javascript - ReferenceError:样式未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58545320/