2016-01-27 38 views
0

我正在手風琴反應,native.I採取了以下措施:無法找到模塊:反應-Accordion組件

1)在我反應過來,本地的項目,我必須安裝使用反應 - 手風琴組分以下commond:

npm install --save react-accordion-component 

2)將其導入到index.android.js

'use strict'; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    PropTypes, 
    ToastAndroid, 
    TouchableOpacity, 
    ViewPagerAndroid, 
    Text, 
    View 
} from 'react-native'; 
import { Tab, TabLayout } from 'react-native-android-tablayout'; 
import 'react-accordion-component'; 



class POC extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     pagePosition: 0, 
    }; 
    } 



    render() { 

    var Accordion = require('react-accordion-component'); 
var elements = []; 
elements.push({ 
    title: 'Element 1', 
    onClick: function() { 
     alert('Hello World!') 
    }, 
    content: 'Lorem Ipsum...' 
    }); 

elements.push({ 
    title: 'Element 2', 
    onClick: function() { 
    }, 
    content: 'Lorem Ipsum...' 
}); 
    return (
     <View> 
     <TabLayout 
      style={styles.tabLayout} 
      selectedTab={this.state.pagePosition} 
      onTabSelected={_setPagePosition.bind(this)}> 
      <Tab name="S"/> 
      <Tab name="O"/> 
      <Tab name="A"/> 
     <Tab name="p"/> 
     </TabLayout> 
     <ViewPagerAndroid 
      style={styles.viewPager} 
      ref={viewPager => { this.viewPager = viewPager; }} 
      onPageSelected={_setPagePosition.bind(this)}> 
      <View > 
      React.render(<Accordion elements={elements} />, document.getElementById('accordion-example')); 
      </View> 
      <View style={styles.content}> 
      <Text>Tab 2 content</Text> 
      </View> 
      <View style={styles.content}> 
      <Text>Tab 3 content</Text> 
      </View> 
     <View style={styles.content}> 
      <Text>Tab 4 content</Text> 
      </View> 
     </ViewPagerAndroid> 
     </View> 
    ); 
    } 
} 

function _setPagePosition(e:Event) { 
    const pagePosition = e.nativeEvent.position; 
    this.setState({ pagePosition }); 
    // too bad ViewPagerAndroid doesn't support prop updates, 
    // work around by forwarding changes using exposed API 
    this.viewPager.setPage(pagePosition); 
    } 


const styles = StyleSheet.create({ 
    tabLayout: { 
    flex: 1, 
    backgroundColor: '#ddd' 
    }, 
    viewPager: { 
    height: 200, 
    }, 
    content: { 
    padding: 10, 
    } 
}); 

AppRegistry.registerComponent('POC',() => POC); 

但是,當在模擬器上運行,它提供了以下錯誤:

Requiring unknown module "react-accordion-component".

請幫我解決這個問題。

回答

1

看起來你有這兩個語句事情:

在你的文件的頂部:

進口react-accordion-component

而在渲染功能:

var Accordion = require('react-accordion-component')

刪除import語句,並與

var Accordion = require('react-accordion-component')

因此替換它,它應該基本上是這樣的,現在:

'use strict'; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    PropTypes, 
    ToastAndroid, 
    TouchableOpacity, 
    ViewPagerAndroid, 
    Text, 
    View 
} from 'react-native'; 
import { Tab, TabLayout } from 'react-native-android-tablayout'; 
var Accordion = require('react-accordion-component'); 

class POC extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     pagePosition: 0, 
    }; 
    } 

    render() { 
    var elements = []; 
    elements.push({ 
     title: 'Element 1', 
     onClick: function() { 
     alert('Hello World!') 
    }, 
    content: 'Lorem Ipsum...' 
    }); 
...