[React Native] Complete the Notes view
React The View native Complete Notes
2023-09-14 09:00:53 时间
In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.
import firebase from 'firebase'; import React from 'react'; import { View, StyleSheet, Text, ListView, TextInput, TouchableHighlight } from 'react-native'; import Badge from './Badge'; import Divdir from './Helpers/divdir'; var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column' }, buttonText: { fontSize: 18, color: 'white' }, button: { height: 60, backgroundColor: '#48BBEC', flex: 3, alignItems: 'center', justifyContent: 'center' }, searchInput: { height: 60, padding: 10, fontSize: 18, color: '#111', flex: 10 }, rowContainer: { padding: 10 }, footerContainer: { backgroundColor: '#E3E3E3', alignItems: 'center', flexDirection: 'row' } }); // In the video there are a couple errors, fixed them so it would build. class Notes extends React.Component{ constructor(props){ super(props); this.ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}); this.notes = []; this.state = { note: '', dataSource: null, }; // Initialize Firebase var config = { apiKey: "AIzaSyAs8HBqV2X6VIOE5MnDwENz1nRffNkUbiU", authDomain: "github-saver-9a338.firebaseapp.com", databaseURL: "https://github-saver-9a338.firebaseio.com", storageBucket: "github-saver-9a338.appspot.com", }; firebase.initializeApp(config); } componentDidMount(){ firebase.database().ref('notes/').on('child_added', (data)=>{ this.notes.push(data.val()); }) } handleChange(e){ this.setState({ note: e.nativeEvent.text }) } handleSubmit(){ let note = this.state.note; firebase.database().ref('notes/').push({ note, timestamp: +new Date() }) this.setState({ note: '' }) } render(){ var notesHtml = this.notes && this.notes.map((note, index)=>{ return ( <View> <Text key={index}>{note.note}</Text> <Divdir /> </View> ); }); return ( <View style={styles.container}> <Badge userInfo={this.props.userInfo}/> <View> {notesHtml} </View> <View style={styles.footerContainer}> <TextInput style={styles.searchInput} value={this.state.note} onChange={this.handleChange.bind(this)} placeholder="New Note" /> <TouchableHighlight style={styles.button} onPress={this.handleSubmit.bind(this)} underlayColor="#88D4F5"> <Text style={styles.buttonText}>Submit</Text> </TouchableHighlight> </View> </View> ) } }; Notes.propTypes = { userInfo: React.PropTypes.object.isRequired }; module.exports = Notes;
相关文章
- React Native Android入门实战及深入源码分析系列(2)——React Native源码编译
- [React] Use the Fragment Short Syntax in Create React App 2.0
- [React Native] Prevent the On-screen Keyboard from Covering up Text Inputs
- [ReactVR] Render Custom 3D Objects Using the Model Component in React VR
- [D3] Creating a D3 Force Layout in React
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React] Using the classnames library for conditional CSS
- 基于react开发package.json的配置
- react-native 环境配置及hello world
- [React] useImperativeHandle + forwardRef
- [React] Setup an API Proxy in Create React App
- [React Testing] Test a Custom React Hook with React’s Act Utility and a Test Component
- [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props
- [React] Safely setState on a Mounted React Component through the useEffect Hook
- [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React Testing] The Redux Store - Multiple Actions
- [React] React Fundamentals: with-addons - ReactLink
- [React] React Fundamentals: The Render Method
- React Native学习笔记(1) 环境配置,项目结构,开发环境结构
- 为什么所有的React应用开头都有一行meta charset="utf-8"语句?
- react读书笔记
- 7大提高 React 性能的技巧
- React常见面试题
- 【taro react】---- H5 通过 Jenkins 实现自动化部署