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

Question

我正在使用 react-native-collapsible 制作手风琴。我正在为每个手风琴部分设置 header 的样式，使其看起来有点像带有一些图标（包括人字形）的列表项。当我点击每个部分时，我想将该部分的 header 人字形从右更改为下。

我对 RN 文档中 "Direct Manipulation" 页面的一些示例感到困惑，并尝试使用状态变量，但我没有运气。

这是我得到的，它告诉我 onChange() this.refs['First'] 未定义，尽管第一个 V 形图标引用是 "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

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

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

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

有一个道具 isActive 只需在 header 或下面这样的内容组件中传递道具

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

Answer 3

可以使用React Native collapsible package的'isActive'prop来实现。实现如下；

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

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

How to change an icon name property with react-native-collapsible onChange()

accordion

react-native

react-native-collapsible

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

How to change an icon name property with react-native-collapsible onChange()

accordion

react-native

react-native-collapsible

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