我正在尝试创建一个带有内部按钮的可扩展列表，以浏览其他屏幕。我无法调用堆栈导航器来导航相关屏幕。我如何获得App.js的道具？因为现在道具保留了我的CONTENT表。还是我能做些更好的方法？在“内容”上，id部分是堆栈导航器上的屏幕名称。
import React, { Component } from 'react';
import { StyleSheet, View, Image, Text, ImageBackground, StatusBar, TouchableOpacity, LayoutAnimation, UIManager, Platform, ScrollView} from "react-native";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { RFPercentage } from "react-native-responsive-fontsize";
class ExpandableItemComponent extends Component {
//Custom Component for the Expandable List
constructor() {
super();
this.state = {
layoutHeight: 0,
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.item.isExpanded) {
this.setState(() => {
return {
layoutHeight: null,
};
});
} else {
this.setState(() => {
return {
layoutHeight: 0,
};
});
}
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.layoutHeight !== nextState.layoutHeight) {
return true;
}
return false;
}
render() {
return (
<View>
{/*Header of the Expandable List Item*/}
<TouchableOpacity
activeOpacity={0.8}
onPress={this.props.onClickFunction}
style={styles.header}>
<Text style={styles.headerText}>{this.props.item.category_name}</Text>
</TouchableOpacity>
<View
style={{
height: this.state.layoutHeight,
overflow: 'hidden',
}}>
{/*Content under the header of the Expandable List Item*/}
{this.props.item.subcategory.map((item, key, navigation) => (
<TouchableOpacity
key={key}
style={styles.content}
onPress={() => navigation.navigate(item.id)}>
<Text style={styles.text}>
{item.val}
</Text>
<View style={styles.separator} />
</TouchableOpacity>
))}
</View>
</View>
);
}
}
export default class BirNefesHuzurScreen extends Component{
constructor() {
super();
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
this.state = { listDataSource: CONTENT };
}
updateLayout = index => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
const array = [...this.state.listDataSource];
array[index]['isExpanded'] = !array[index]['isExpanded'];
this.setState(() => {
return {
listDataSource: array,
};
});
};
render(props) {
return (
<View style={styles.container}>
<ScrollView>
<StatusBar hidden />
<View style={styles.imageContainer}>
<ImageBackground
source={require("../../assets/BirNefesHuzur.png")}
resizeMode="cover"
style={styles.background}
>
</ImageBackground>
</View>
<Text style={styles.textContainer}>
<Text style={styles.titleStyle}>BİR NEFES HUZUR {"\n"}</Text>
<Text style={styles.textStyle}>Coğrafya kaderse, huzur da Çanakkale’nin kaderidir. Rüzgârı meşhurdur, doğası huzur verir. Çanakkale’de zirveden kıyılara, çam ağaçlarından makiye dönen bir bitki örtüsü hakimdir. Yazı cıvıl cıvıl, kışı yemyeşildir. Ormanları doğa tutkunlarını kucaklarken, kıyıları denize nazır keyif yapmayı sevenler için biçilmiş kaftandır. Çanakkale’de bir nefeste iki kıta, iki iklim tadarsınız. </Text>
</Text>
{this.state.listDataSource.map((item, key) => (
<ExpandableItemComponent
key={item.category_name}
onClickFunction={this.updateLayout.bind(this, key, props)}
item={item}
/>
))}
</ScrollView>
</View>
);
}
};
const CONTENT = [
{
isExpanded: false,
category_name: 'ÇANAKKALE MERKEZ',
subcategory: [
{ id: 'DardanosHalkPlaji', val: 'Dardanos Halk Plajı' },
{ id: 'GuzelYaliPlaji', val: 'Güzelyalı Halk Plajı' },
{ id: 'YeniKordonBarisPlaji', val: 'Yeni Kordon Barış Plajı' },
{ id: 'KepezBelediyesiHalkPlaji', val: 'Kepez Belediyesi Halk Plajı' },
{ id: 'KemerdereSuKemeri', val: 'Kemerdere Su Kemeri' }],
},
{
isExpanded: false,
category_name: 'AYVACIK',
subcategory: [
{ id: 'KazDaglari', val: 'Kaz Dağları Milli Parkı' },
{ id: 'AdatepeKoyu', val: 'Adatepe Köyü' },
{ id: 'Babakale', val: 'Babakale' },
{ id: 'KadirgaKoyu', val: 'Kadırga Koyu' },
{ id: 'AssosYesilLiman', val: 'Assos Yeşil Liman' },
{ id: 'KoruobaKoyu', val: 'Koruoba Koyu' },
{ id: 'SivriceKoyu', val: 'Sivrice Koyu' },
{ id: 'SokakagiziKoyu', val: 'Sokakağzı Koyu' },
{ id: 'BabakaleAkliman', val: 'Babakale Akliman Koyu' }],
},
{
isExpanded: false,
category_name: 'BAYRAMİÇ',
subcategory: [{ id: 'AyazmaPinariTabiatParki', val: 'Ayazma Pınarı Tabiat Parkı' }],
},
{
isExpanded: false,
category_name: 'BİGA',
subcategory: [
{ id: 'Karabiga', val: 'Karabiga' },
{ id: 'UzunderePlaji', val: 'Uzundere Plajı' },
{ id: 'KemerKoyuSahili', val: 'Kemerköyü Sahili' },
{ id: 'SahmelekKoyu', val: 'Şahmelek Koyu' }],
},
{
isExpanded: false,
category_name: 'BOZCAADA',
subcategory: [
{ id: 'PolenteFeneriVeRuzgarGulleri', val: 'Polente Feneri ve Rüzgar Gülleri' },
{ id: 'BozcaadaMerkeziPlaji', val: 'Bozcaada Merkezi Plajı' },
{ id: 'AyazmaPlaji', val: 'Ayazma Plajı' },
{ id: 'SuluBahceKoyu', val: 'Sulu Bahçe Koyu' },
{ id: 'HabbeliPlaji', val: 'Habbeli Plajı' },
{ id: 'AkvaryumKoyuMermerBurnu', val: 'Akvaryum Koyu (Mermer Burnu)' },
{ id: 'TuzburnuKoyu', val: 'Tuzburnu Koyu' },
{ id: 'BeylikKoyu', val: 'Beylik Koyu' },
{ id: 'PoyrazLimani', val: 'Poyraz Limanı' },
{ id: 'CayirKoyu', val: 'Çayır Koyu' }],
},
{
isExpanded: false,
category_name: 'ECEABAT',
subcategory: [
{ id: 'AriburnuYarlariVeYukseksirt', val: 'Arıburnu Yarları ve Yükseksırt' },
{ id: 'KabatepeOrmanKamp', val: 'Kabatepe Orman Kamp' },
{ id: 'KucukAnafartalarKoyuSahili', val: 'Küçük Anafartalar Köyü Sahili' },
{ id: 'KucukKemikliBurnu', val: 'Küçük Kemikli Burnu' },
{ id: 'SulvaKoyu', val: 'Suvla Koyu' },
{ id: 'BuyukKemikliBurnu', val: 'Büyük Kemikli Burnu' }],
},
{
isExpanded: false,
category_name: 'EZİNE',
subcategory: [{ id: 'Geyikli', val: 'Geyikli' },
{ id: 'YenikoyPapazPlaji', val: 'Yeniköy Papaz Plajı' }],
},
{
isExpanded: false,
category_name: 'GELİBOLU',
subcategory: [{ id: 'SarozKorfeziKiyilari', val: 'Saroz Körfezi Kıyıları ' }],
},
{
isExpanded: false,
category_name: 'GÖKÇEADA',
subcategory: [{ id: 'GokceadadaDenizeGirilecekYerler', val: 'Gökçeada’da Denize Girilecek Yerler' },
{ id: 'EskiRumKoyleri', val: 'Eski Rum Köyleri' },
{ id: 'GokceadaSualtiMilliParki', val: 'Gökçeada Sualtı Milli Parkı' }],
},
{
isExpanded: false,
category_name: 'YENİCE',
subcategory: [{ id: 'KazDaglariYeniceOrmanlari', val: 'Kaz Dağları - Yenice Ormanları' }],
},
];