Question

我正在做反应原生的手风琴。我采取了以下步骤：

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”。

请帮我解决这个问题。

Answer 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...'
  });
...

无法找到模块：react-accordion组件

1 个答案: