リアクションネイティブでモーダルを使用しようとしています

Question

私の反応するネイティブアプリでモーダルを使用しようとしました。私はより多くのオプションのモーダルを表示する多くのページをしたい。私は、より多くのメニューページにモーダルを入れることに関して次の試みを行った。私は現在取得していますエラーがある：あなたがexportMoreMenuコンポーネントに忘れ

MoreMenu.js

import React, { Component } from 'react'; 
import { Modal, Text, TouchableHighlight, View } from 'react-native'; 

class MoreMenu extends Component { 

    state = { 
    modalVisible: false, 
    } 

    setModalVisible(visible) { 
    this.setState({modalVisible: visible}); 
    } 

    render() { 
    return (
     <View style={{marginTop: 22}}> 
     <Modal 
      animationType={"slide"} 
      transparent={false} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {alert("Modal has been closed.")}} 
      > 
     <View style={{marginTop: 22}}> 
      <View> 
      <Text>Hello World!</Text> 

      <TouchableHighlight onPress={() => { 
       this.setModalVisible(!this.state.modalVisible) 
      }}> 
       <Text>Hide Modal</Text> 
      </TouchableHighlight> 

      </View> 
     </View> 
     </Modal> 

     <TouchableHighlight onPress={() => { 
      this.setModalVisible(true) 
     }}> 
      <Text>Show Modal</Text> 
     </TouchableHighlight> 

     </View> 
    ); 
    } 
} 

TabsRoot.JS

class Tabs extends Component { 
    _changeTab (i) { 
    const { changeTab } = this.props 
    changeTab(i) 
    } 
    _renderTabContent (key) { 
    switch (key) { 
     case 'today': 
     return <Home /> 
     case 'share': 
     return <Share /> 
     case 'savequote': 
     return <SaveQuote /> 
     case 'moremenu': 
     return <MoreMenu /> 
    } 
    } 
    render() { 
    const tabs = this.props.tabs.tabs.map((tab, i) => { 
     return (
     <TabBarIOS.Item key={tab.key} 
      icon={tab.icon} 
      selectedIcon={tab.selectedIcon} 
      title={tab.title} 
      onPress={() => this._changeTab(i)} 
      selected={this.props.tabs.index === i}> 
      {this._renderTabContent(tab.key)} 
     </TabBarIOS.Item> 
    ) 
    }) 
    return (
     <TabBarIOS tintColor='black'> 
     {tabs} 
     </TabBarIOS> 
    ) 
    } 
} 

export default Tabs 

Answer 1

。 TabsRoot.jsにはMoreMenuコンポーネントを使用します。

のplsはMoreMenu.js

export default MoreMenu