Créer une liste extensible avec réaction native

Question

je présente une liste d'articles avec ce code

 <View> 
     <Text style={styles.sectionHeadingStyle}> 
      Categories 
     </Text> 
     <View style={styles.navSubSectionStyle}> 

     {data.categories.map(category => 
      <Text key={category.id} > 
      { (JSON.parse(category.name)) } 
      </Text> 
     )} 
     </View> 

Je veux être en mesure d'étendre/réduire la liste, avec animation, quand je clique sur la « catégorie » texte. Y a-t-il un élément natif de réaction pour cela?

Answer 1

Vous pouvez utiliser un paquet NPM comme react-native-collapsible

Answer 2

Définir l'état initial de l'effondrement de faux.

handleClick =() => { 
    this.setState({ 
     collapse: !this.state.collapse 
    }) 
} 
<View> 
    <TouchableHighlight onClick={this.handleClick}> 
     <Text style={styles.sectionHeadingStyle}> 
      Categories 
     </Text> 
    </TouchableHighlight> 
    </View> 
    { 
     this.state.collapse ? 
     <View style={styles.navSubSectionStyle}> 

      {data.categories.map(category => 
      <Text key={category.id} > 
       { (JSON.parse(category.name)) } 
      </Text> 
      )} 
     </View> 
     : null 

    } 
</View>