Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firebase and React Native

Firebase and React Native

SAWA, Norihiko

July 13, 2016
Tweet

More Decks by SAWA, Norihiko

Other Decks in Technology

Transcript

  1. 11 %FDMBSF%BUB4PVSDF 1 constructor(props) { 2 super(props); 3 this.state =

    { 4 dataSource: new ListView.DataSource({ 5 rowHasChanged: (row1, row2) => row1 !== row2, 6 }) 7 }; 8 this.itemsRef = new Firebase("<my-fb-app>/items"); 9 }
  2. 12 *OJUJBMJ[FMJTUXIFOUIFDPNQPOFOUIBTpSTUCFFOSFOEFSFE 1 listenForItems(itemsRef) { 2 itemsRef.on('value', (snap) => {

    3 // get children as an array 4 var items = []; 5 snap.forEach((child) => { 6 items.push({ 7 title: child.val().title, 8 post_time: child.val().post_time, 9 userID: child.val().userID, 10 _key: child.key() 11 }); 12 }); 13 this.setState({ 14 dataSource: this.state.dataSource.cloneWithRows(items) 15 }); 16 }); 17 } 18 19 componentDidMount() { 20 this.listenForItems(this.itemsRef); 21 }
  3. 13 DPNQPOFOUT 1 render() { 2 return ( 3 <View

    style="{styles.container}"> 4 <ListView 5 dataSource="{this.state.dataSource}" 6 renderRow=“{this._renderItem.bind(this)}" 7 style="{styles.listview}/"> 8 </View> 9 ); 10 }
  4. 15 3FNPWF*UFN 1 _renderItem(item) { 2 const onPress = ()

    => { 3 AlertIOS.prompt( 4 'Delete', 5 null, 6 [ 7 {text: 'Delete', onPress: (text) => this.itemsRef.child(item._key).remove()}, 8 {text: 'Cancel', onPress: (text) => console.log('Cancel')} 9 ], 10 'default' 11 ); 12 }; 13 return ( 14 <ListItem item={item} onPress={onPress} /> 15 ); 16 }
  5. 17 3FBDU/BUJWFͰͷ'JSFCBTFͷه๏ʹετϨε͸ͳ͍
 ʢ·ͩʣ 3FBDUͷTUBUF؅ཧͱɺ'JSFCBTFͷಉظ͸૬ੑ͕ྑͦ͞͏ $PODMVTJPO “This is where React fits

    perfectly with Firebase. Because the Firebase database synchronizes application state across multiple devices, and React efficiently re-renders application state changes.”