React Nativeで特定のmodalの表示ができない
FlatListを使ってfirebaseに保存されているデータを一覧表示させる機能を作成していて、
一覧表示している画面で表示しきれないデータをmodalに表示させようと考えています。
modalを表示させるボタンやmodal自体はfirebaseに格納されているIDを持ってくることはできているが、
modalVisibleをtrueに変更する時に表示させたいmodalとの紐付けができておらず、
一覧表示させている一番後ろのデータがmodalに表示されてしまっている状態です。
【実現したいこと】
一覧データのそれぞれにあるmodalを表示させるボタンを押すとIDなどで紐付けられたmodalを表示させたい。
該当のソースコード
<FlatList data={members} extraData={this.state} removeClippedSubviews={false} keyExtractor={item => item.key.toString()} renderItem={({ item }) => <View style={styles.cell} > <View style={styles.detail} > <Image source={(() => { if (item.gender == "male") { return require('./assets/boy.png') } else { return require('./assets/girl.png') } })()} style={{ width: 80, height: 80, marginRight: 5,alignItems: 'center' }} /> <View> <Text style={styles.name} >{item.name + this.signs(item.thankscount, "♡") + this.signs(item.goodcount, "☆")}</Text> <View style={styles.tagwrapper}> <Text style={styles.tagtext} > #{item.tags[0].tag} </Text> <Text style={styles.tagtext} > #{item.tags[1].tag} </Text> <Text style={styles.tagtext} > #{item.tags[2].tag} </Text> <View> <Button onPress={() => this.openModal(item.key)} title="Open modal"/> <Modal visible={this.state.modalVisible} animationType={'slide'} onRequestClose={() => this.closeModal()} > <View style={styles.modal}> <Text>{item.name + item.tags[0].tag + item.tags[1].tag + item.tags[2].tag}</Text> <Button onPress={() => this.closeModal()} title="Close modal" > </Button> </View> </Modal> </View> </View> </View> </View>
試したこと
modalにHTMLのようにIDを付与して、特定のmodalのみVisibleをtureにしようとしたが、HTMLのようにIDの設定をする方法がわからずできなかった。
補足情報(FW/ツールのバージョンなど)
あなたの回答
tips
プレビュー