FlatList单击以显示项目并渲染其他列表

Question

我有问题。但我不知道它在哪里。我做了一个flatList，现在有7个项目。当我单击某人时，我希望打开其特殊列表。所以；

'Sıcakİçecekler'，  “Soğukİçecekler”，  'Kahveler'，  'SoğukKahveler'，  'Yemekler'，  'Nargileler'， 'Kokteyller'

这是我的第一张清单。 当我使用touchableOpacity单击“Sıcakİçecekler”时，此列表将更改。 新列表是；

“可乐”， “雪碧”， “芬达”

更改列表时，新列表必须位于相同的位置。 我的问题可能是语法。但是我不知道。请帮助我。

enter code here

render() {
    return (
        <LinearGradient colors={["#C8BAAB", "#5E2A2C"]} style={styles.linearGradient}>
            <View style={styles.viewStyle}>

            </View>

            <View style={{ height: 3, width: 375 }}>

            </View>

            <View style={styles.container}>
                {this.actionOnRow()}


            </View>
        </LinearGradient>
    );
}

}

enter code here

actionOnRow =（数字）=> {         如果（数字=== 1）{             返回（                  指数}                     ItemSeparatorComponent = {（）=>                                              }

                renderItem={({ item }) =>
                    <TouchableOpacity onPress={() => this.actionOnRow(item.id)}>
                        <LinearGradient
                            colors={["#fdfcfb", "#e2d1c3"]}
                            style={[styles.gradientWrapper]}
                            start={[0, 0.5]}
                            end={[1, 0.5]}
                        >

                            <Text style={styles.text}>
                                {item.name}
                            </Text>


                        </LinearGradient>
                    </TouchableOpacity >
                }
            />
        );
    }
   else if (number === 2) {
        return (
            <FlatList
                data={list2}
                keyExtractor={(item, index) => index}
                ItemSeparatorComponent={() =>
                    <View style={[styles.seperator]} />
                }

                renderItem={({ item }) =>
                    <TouchableOpacity >
                        <LinearGradient
                            colors={["#fdfcfb", "#e2d1c3"]}
                            style={[styles.gradientWrapper]}
                            start={[0, 0.5]}
                            end={[1, 0.5]}
                        >

                            <Text style={styles.text}>
                                {item.name}
                            </Text>


                        </LinearGradient>
                    </TouchableOpacity >
                }
            />
            );

    }
    else {
        console.log("başlangıç")
        return (
            <FlatList
                data={list}
                keyExtractor={(item, index) => index}
                ItemSeparatorComponent={() =>
                    <View style={[styles.seperator]} />
                }

                renderItem={({ item }) =>
                    <TouchableOpacity onPress={() => this.actionOnRow(item.id)}>
                        <LinearGradient
                            colors={["#fdfcfb", "#e2d1c3"]}
                            style={[styles.gradientWrapper]}
                            start={[0, 0.5]}
                            end={[1, 0.5]}
                        >

                            <Text style={styles.text}>
                                {item.name}
                            </Text>


                        </LinearGradient>
                    </TouchableOpacity >
                }
            />);
    }
}

这是我的清单。

enter code here

常量列表= [     {         名称：“Sıcakİçecekler”，         导航：“主要”，         编号：1     }，     {         名称：“Soğukİçecekler”，         id：2，

},
{
    name: 'Kahveler',
    id: 3
},
{
    name: 'Soğuk Kahveler',
    id: 4

},
{
    name: 'Yemekler',
    id: 5
},
{
    name: 'Nargileler',
    id: 6

},
{
    name: 'Kokteyller',
    id: 7
},

];

const list2 = [     {         名称：“可乐”，     }，     {         名称：“芬达”，

},
{
    name:'sprite'
}
    ];