我正在使用 react-native-collapsible 创建手风琴。我将每个手风琴部分的标题设置为看起来有点像带有一些图标的列表项,包括 V 形。当我点击每个部分时,我想将该部分的标题 V 形从右向下更改。
我对 RN 文档中“直接操作”页面中的一些示例感到困惑,并尝试使用状态变量,但我没有运气。
这就是我所拥有的,它告诉我 onChange() this.refs['First'] 是未定义的,尽管第一个 V 形的图标 ref 是“First”。
class AccordionView extends React.Component {
constructor(props) {
super(props);
//console.log(props);
this.state = {
icons: "chevron-right",
};
}
_renderHeader(section) {
return (
<View style={styles.accHeader}>
<View style={{flex: 1, flexDirection:'row', alignItems: 'center', justifyContent:'flex-start'}}>
<View style={{flex:.5,flexDirection:'row',alignItems:'center',justifyContent:'flex-start'}}>
<Text style={styles.accHeaderText}>{section.title}</Text>
</View>
<View style={{flex:.5,flexDirection:'row',alignItems:'center',justifyContent:'flex-end'}}>
<FontAwesome name="link" size={24} color="#666" style={{paddingHorizontal:6}} onPress={() => alert('link!')} />
<MaterialIcons name="place" size={24} color="#666" style={{paddingHorizontal:6}} />
<FontAwesome name="phone" size={24} color="#666" style={{paddingHorizontal:6}} />
<FontAwesome name="chevron-right" size={24} color="#999" style={{paddingHorizontal:8}} ref={section.title} />
</View>
</View>
</View>
)
};
_renderContent(section) {
return (
<View style={styles.accContent}>
<Text>{section.content}</Text>
</View>
);
};
_onChange(index) {
this.refs['First'].setNativeProps({name:"chevron-down"});
};
render() {
return (
<Accordion
sections={sections}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
underlayColor="#0972CE"
onChange={this._onChange}
/>
);
} }