找不到模块：react-accordion 组件答案

【问题标题】：Unable to find module: react-accordion component找不到模块：react-accordion 组件
【发布时间】：2016-01-27 10:10:28
【问题描述】：

我正在 react-native 中制作手风琴。我采取了以下步骤：

1) 在我的 react-native 项目中，我使用以下 commond 安装了 react-accordion-component：

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);

但是在模拟器上运行时，会报如下错误：

需要未知模块“react-accordion-component”。

请帮我解决这个问题。

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案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...'
  });
...

【讨论】：