ReferenceError：样式未定义

Question

为什么出现错误：“ 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
    }


  });

Answer 1

关于样式错误，用style.buttonsView中的styles.buttonsView替换MyModal。

对于Invariant Violation错误，您正在将MyModal导出为默认导出，但尝试将其作为命名导出导出。

替换：

import {MyModal} from './MyModal';

使用：

import MyModal from './MyModal';