我正在react-native中制作 Accordion 。我已采取以下步骤:
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);
但是在模拟器上运行时,出现以下错误:
Requiring unknown module "react-accordion-component".
请帮我解决这个问题。
最佳答案
看起来您有以下两种说法:
在文件顶部:
导入react-accordion-component
在渲染函数中:
var Accordion = require('react-accordion-component')
删除导入语句,并将其替换为
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...'
});
...
关于javascript - 无法找到模块: react-accordion component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35034375/