LoginSignup
1
0

More than 5 years have passed since last update.

React Native と Firebase のビギナーズ ガイド の拡張

Posted at

「React Native と Firebase のビギナーズ ガイド(2016年8月8日月曜日)」を参考にアプリを作成しています。元々は食料品リストの追加・削除・一覧のCRUDの事例です。

これをイベント管理用に仕上げています。1画面はイベント一覧です。イベントを選択して予約します。
2画面目は、予約一覧です。問題は、2画面目が空白で受け渡っていないようです。
以下、処理概要ですが、何か分かりましたらお知らせ下さい。

DBのクラスは、
イベント用クラス(イベント名、、、)
予約用クラス(ユーザー毎に予約一覧を作るため)

1画面はイベント一覧でのFirebase database処理概要
'
this.itemsRef = this.getRef().child('items’); イベント一覧用参照ポインタ
this.userRef = this.getRef().child('user’);  予約一覧用参照ポインタ

    getRef() {return firebaseApp.database().ref();}

var user = firebase.auth().currentUser;  ユーザーアカント取得
this.setState({user: user}); render用に設定

render部
    mail=this.state.user.email;
console.log('mail = ' + mail);
mail=mail.substring(0,mail.indexOf("@"));
this.userRef = firebaseApp.database().ref('user/' + mail);
this.userRef.push(new User(event,password,user);
これで以下のDBが作成されます。
rera06x
*
-KXih12q_2XE24UQ6S7p
*
event:
*
password:
*
user
*
_key:
*
title:
*
-KXih_ZHuf12YujhC0Bl
*
event
*
_key:
*
title:
*
password
*
_key:
*
title:
*
user
*
_key:
*
title:
*
-KXikRGmj9LTENY3yBDr
*
event
*
_key:
*
title:
*
password
*
_key:
*
title:
*
user
*
_key:
*
title:

2画面は予約一覧でのFirebase database処理概要
    var user = firebase.auth().currentUser; 同じようにユーザー取得

   componentDidMount() {
   this.listenForItems(this.userRef);

this.userRef = firebaseApp.database().ref('user/' + mail);

    listenForItems(userRef) {       此所で、予約一覧取得
userRef.on('value', (snap) => {    ★★★★★★★★★★★★★これで入れば、renderできるはず
// get children as an array
var user = [];
snap.forEach((child) => {
user.push({
event: child.val().event,
_key: child.key
});
});

this.setState({
dataSource: this.state.dataSource.cloneWithRows(user)
});
});
}

render() {
return (
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}
enableEmptySections={true}
style={styles.listview}/>
省略
_renderItem(user) {
const onPress = () => {
Alert.alert(
'受付登録',
null,
[
{text: '受付登録', onPress: (user) => uketukeExec },
{text: 'Cancel', onPress: (user) => console.log('Cancelled')}
]
);
};
return (
 ★★★★★★★★★★★
);
}
}

class ListItem1 extends Component {
    render() {
return (


{this.props.item.event} これが空白になる。


省略

'

1
0
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0