React NativeとFirebaseの初心者ガイド、修正の例？

Question

初心者がネイティブとFirebase

2016年7月14日

デビッド・東 開発提唱

を反応させるために案内こんにちは、私の名前は商事板垣です。 この例をイベント管理のために作ろうとしました。 元はfirebaseデータベースを使った食料品の例です。 私の意図は、FacebookのF8appのようなイベント管理ツールを構築することでした。

スクリーン1は、イベントの登録管理、イベントが選択され、登録されます。 画面2は

画面2が空白である、受付管理のためのものである、 は

 
    DB’s class is as follows. 
    Event class(Event, day, start time , end time, etc) 
    Registration class(User, Event etc)
 

Screen 1 Outline of Firebase database management. 
this.itemsRef = this.getRef().child('items’);　For Event Class reference pointer 
this.userRef = this.getRef().child('user’);　　For User Registration Class 

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

VARユーザー= firebase.auth（）Screen2にするために、画面1からの転送に動作していないことに思わあるCurrentUser。ユーザーアカウントを取得する
this.setState（{user：user}）; * 
* 
ユーザー
：
* 
-KXih_ZHuf12YujhC0Bl 
* 
イベント
* 
_key：
* 
タイトル：
* 
パスワード
* 
_key：
* 
タイトル
 

render section 
    mail=this.state.user.email; 
    console.log('mail = ' + mail); 
    mail=mail.substring(0,mail.indexOf("@")); 
    console.log('after modify mail = ' + mail); 
    this.userRef = firebaseApp.database().ref('user/' + mail); 
    this.userRef.push(new User(event,password,user); 
This screen was OK and DB was created as follows. 
rera06x 
* 
     -KXih12q_2XE24UQ6S7p 
    * 
event: 
     * 
password: 
* 
user 
    * 
_key: 
    * 
 

タイトルをレンダリング
_key：
* 
タイトル：
* 
-KXikRGmj9LTENY3yBDr 
* 
イベント
* 
_key：
* 
タイトル：
* 
パスワード
* 
_key：
* 
タイトル：* 

ユーザー
* 
_key：* 

タイトル：
 

Screen ２ for Receptionist and Firebase database process's outline 
var user = firebase.auth().currentUser;　 same as screen 1, to get  user account 

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

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

listenForItems(userRef) {　　　　　　　In this section, The Registration list was get, 
userRef.on('value', (snap) => {　　　 
 


         
 
 

// 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 (
<ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderItem.bind(this)} 
     enableEmptySections={true} 
     style={styles.listview}/> 
abridgment 

_renderItem(user) { 
const onPress =() => { 
    Alert.alert(
    'Registration', 
    null, 
    [ 
     {text: 'Registration', onPress: (user) =>　uketukeExec }, 
     {text: 'Cancel', onPress: (user) => console.log('Cancelled')} 
    ] 
); 
}; 
return (
    <ListItem1 item={user} onPress={onPress} />　★★★★★★★★★★★ 
); 
    } 
} 

class ListItem1 extends Component { 

    render() { 
    return (
     <TouchableHighlight onPress={this.props.onPress}> 
     <View style={styles.li}> 
     <Text style={styles.liText}>{this.props.item.event}</Text>　 

This process does not work 
     </View> 
    </TouchableHighlight> 
abridgement 

任意のコメントが理解されるであろう。 ショウジ

Answer 1

最後に、深くデバッグした後、私はバグを発見しました。 エラーの原因は私の貧弱なプログラムでした。 私の意欲は幸せに達成されました。

とにかく、React NativeとFirebaseの初心者ガイド はこの分野で最高の記事です。特にFirebaseの新機能のようです。 商事