React native 如何使用react native Collapsable onChange（）更改图标名称属性

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

我在RN文档中的“直接操作”页面上混淆视听，尝试使用状态变量，但我运气不好

这是我得到的，它告诉我onChange（）这个.refs['First']是未定义的，尽管第一个雪佛龙的图标ref是“First”

class AccordionView扩展了React.Component{
建造师（道具）{
超级（道具）；
//控制台日志（道具）；
此.state={
图标：“V形右”，
};
}
_渲染器（部分）{
返回(
{section.title}
警报（'link！'）}/>
)
};
_渲染内容（部分）{
返回(
{section.content}
);
};
_onChange（索引）{
this.refs['First'].setNativeProps（{name:“chevron down”}）；
};
render（）{
返回(
);
} }

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

（我无法测试下面的代码，因此我不能保证它能正常工作，但它应该能让您大致了解它的工作原理。）

class AccordionView扩展了React.Component{
建造师（道具）{
超级（道具）；
//控制台日志（道具）；
此.state={
活动索引：0，
};
}
_渲染器（节，索引）{
返回(
{section.title}
警报（'link！'）}/>
)
};
_渲染内容（部分）{
返回(
{section.content}
);
};
_onChange（索引）{
这是我的国家({
activeIndex:index，
})
};
render（）{
返回(
);
}
}

有一个道具

是活动的

只需在标题或内容组件中传递道具，如下所示

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

\u渲染器（节、索引、isActive）{
返回(
{isActive？图标1:图标2}
)
}

可以使用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}
          />
        );
      }
    }

class AccordionView扩展了React.Component{
建造师（道具）{
超级（道具）；
//控制台日志（道具）；
此.state={
图标：“V形右”
};
}
_renderHeader（节、索引、isActive）{
返回(
{section.title}
警报（“链接！”）}
/>
{isActive(
) : (
)}
);
}
_渲染内容（部分）{
返回(
{section.content}
);
}
_onChange（索引）{
this.refs[“First”].setNativeProps（{name:“chevron down”}）；
}
render（）{
返回(
);
}
}

谢谢。我的问题出在其他地方，但无论如何我都会接受这个答案。（直到深入阅读react native Collapsable的文档，我才意识到_renderHeader和_renderContent接受其他参数。）不仅要包含代码，还要解释代码是如何工作的，以及为什么它能解决所提出的问题，这也是一个好主意。

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

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