android react native paper list accordion

i86rm4rw  于 2023-06-20  发布在  Android
关注(0)|答案(3)|浏览(161)

我有一个问题与react-native纸名单 accordion 它是不工作的android!我的意思是列表显示,但不是当你点击 accordion :(。在iOS上,一切都很好!有什么办法可以解决这个问题吗:(thx
我在三星上用的是最新的android版本

<List.Accordion
    key={id}
    theme={{ colors: { primary: '#4169e1' } }}
    style={{ backgroundColor: 'white', marginBottom: 1 }}
    onPress={() => { LayoutAnimation.easeInEaseOut(); }}
    title={title}>
    <Divider />
    <List.Item
        titleStyle={styles.textContainer}
        title={
            <View>
                <Text style={styles.text}>{text}</Text>
            </View>
        } key={index} />
</List.Accordion>
7uhlpewt

7uhlpewt1#

你得把东西放<List.Accordion>进手术<List.AccordionGroup>室<List.Section>

<List.AccordionGroup title={title} key={id}>
    <List.Accordion
        key={id}
        theme={{ colors: { primary: '#4169e1' } }}
        style={{ backgroundColor: 'white', marginBottom: 1 }}
        onPress={() => { LayoutAnimation.easeInEaseOut(); }}
        title={title}>
        <Divider />
        <List.Item
            titleStyle={styles.textContainer}
            title={
                <View>
                    <Text style={styles.text}>{text}</Text>
                </View>
            } key={index} />
     </List.Accordion>
</List.AccordionGroup>
h7appiyu

h7appiyu2#

用FlatList Package 解决了我的问题,数据参数将是项目数组

<FlatList data={data}
          renderItem={({item}) => (

          <List.Accordion
               theme={{ colors: { primary: '#4169e1' } }}
               style={{ backgroundColor: 'white', marginBottom: 1 }}
               onPress={() => { LayoutAnimation.easeInEaseOut(); }}
               title={item.title}>
               <Divider />
               <List.Item
                   titleStyle={styles.textContainer}
                   title={
                   <View>
                        <Text style={styles.text}>{text}</Text>
                   </View>
                   } key={index} />
          </List.Accordion>

          )}
/>
vu8f3i0k

vu8f3i0k3#

const toggleAccordion = () => {
    LayoutAnimation.easeInEaseOut();
    setExpanded(!expanded);
  };

<List.Accordion
      key={id}
      theme={{ colors: { primary: '#4169e1' } }}
      style={{ backgroundColor: 'white', marginBottom: 1 }}
      title={title}
      expanded={expanded}
      onPress={toggleAccordion}>
      <Divider />
      <List.Item
        titleStyle={styles.textContainer}
        title={
          <View>
            <Text style={styles.text}>{text}</Text>
          </View>
        }
        key={index}
      />
    </List.Accordion>

定义toggleAccordion函数,该函数使用setExpanded函数切换折叠的展开状态。然后将此函数传递给List.Accordion组件的onPress处理程序。
通过将展开的 prop 添加到List.Accordion组件,可以告诉组件默认情况下是展开还是折叠。当onPress处理程序被触发时,toggleAccordion函数被调用,它更新 accordion 的展开状态并使其相应地展开或折叠。
请检查并让我知道。谢谢你。

相关问题