码迷,mamicode.com
首页 > 其他好文 > 详细

[React Native] Complete the Notes view

时间:2016-08-05 06:38:51      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

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] Complete the Notes view

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5739790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!