「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 (
省略
_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} これが空白になる。
省略
'