質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

0回答

843閲覧

React Nativeで特定のmodalの表示ができない

yu.yagishita

総合スコア10

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2019/03/22 03:11

編集2019/03/22 03:14

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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問