如何使用 react-native-collapsible onChange() 更改图标名称属性

Question

我正在使用 react-native-collapsible 创建手风琴。我将每个手风琴部分的标题设置为看起来有点像带有一些图标的列表项，包括 V 形。当我点击每个部分时，我想将该部分的标题 V 形从右向下更改。

我对 RN 文档中“直接操作”页面中的一些示例感到困惑，并尝试使用状态变量，但我没有运气。

这就是我所得到的，它告诉我 onChange() this.refs['First'] 是未定义的，尽管第一个 chevron 的图标 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}
        />
    );
} }

Answer 1

您应该将活动索引存储在状态中，并在其他部分变为活动状态时更新状态。然后在图标上，检查状态中的索引是否与正在渲染的部分的索引匹配，并设置相关图标。

（我无法测试下面的代码，所以我不能保证它可以工作，但它应该让您大致了解它是如何工作的。）

class AccordionView extends React.Component {
  constructor(props) {
      super(props);
      //console.log(props);
      this.state = {
        activeIndex: 0,
      };
  }
  _renderHeader(section, index) {
      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={this.state.activeIndex === index ? "chevron-down" : "chevron-right"} size={24} color="#999" style={{paddingHorizontal:8}} />
                  </View>
              </View>
          </View>
      )
  };
  _renderContent(section) {
      return (
          <View style={styles.accContent}>
            <Text>{section.content}</Text>
          </View>
        );
  };
  _onChange(index) {
    this.setState({
      activeIndex: index,
    })
  };
  render() {
      return (
          <Accordion 
              sections={sections} 
              renderHeader={this._renderHeader} 
              renderContent={this._renderContent}
              underlayColor="#0972CE"
              onChange={this._onChange}
          />
      );
  }
}

Answer 2

有一个 prop 是 isActive，只需在下面这样的标题或内容组件中传递该 prop

_renderHeader(section, index, isActive) {
   return(
       {isActive ? <Text>icon 1 </Text> : <Text>icon 2 </Text> }
   )
}

Answer 3

可以使用 React Native 可折叠包的 'isActive' 属性来实现这一点。实现如下；

 class AccordionView extends React.Component {
      constructor(props) {
        super(props);
        //console.log(props);
        this.state = {
          icons: "chevron-right"
        };
      }
      _renderHeader(section, index, isActive) {
        return (
          <View style={styles.accHeader}>
            <View
              style={{
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "flex-start"
              }}
            >
              <View
                style={{
                  flex: 0.5,
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "flex-start"
                }}
              >
                <Text style={styles.accHeaderText}>{section.title}</Text>
              </View>
              <View
                style={{
                  flex: 0.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 }}
                />
                {isActive ? (
                  <FontAwesome
                    name="chevron-right"
                    size={24}
                    color="#999"
                    style={{ paddingHorizontal: 8 }}
                    ref={section.title}
                  />
                ) : (
                  <FontAwesome
                    name="chevron-down"
                    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}
          />
        );
      }
    }