React Native和Firebase中的ListView

时间:2017-02-27 17:23:39

标签: javascript listview firebase react-native

我已经能够使用Firebase身份验证服务登录/登录,并使用React Native app在Firebase数据库中添加/删除项目。但问题是我只需显示已登录的一个用户的项目并非全部数据库中的可用数据。我还设法让会话中的用户ID已经连接。这是我的代码:...我想我需要在列表视图中使用过滤器,但我不确定它

constructor(props) {
        super(props);
        this.tasksRef = this.props.firebaseApp.database().ref("/item");
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            uid: " ",
            user:null,
            loading: true,
            dataSource: dataSource,
            newTask: 
        };
    }  
    componentDidMount() {
        this.listenForTasks(this.tasksRef);  
    }

    listenForTasks(tasksRef) {
        tasksRef.on('value', (dataSnapshot) => {
            var tasks = [];
            dataSnapshot.forEach((child) => {
                tasks.push({
                    name: child.val().name,
                    type: child.val().type,
                    id: child.val().id,
                    _key: child.key
                });
            });
                this.setState({
                dataSource: this.state.dataSource.cloneWithRows(tasks)
            });
        });
    }

    componentWillMount() {
        const userData = this.props.firebaseApp.auth().currentUser;
          this.setState({
            user: userData,
            uid: userData.uid,
            loading: false
        });
    }
    _addTask() {
        if (this.state.newTask === "") {
            return;
        }
        if (this.state.newTask && this.state.uid) {
            this.tasksRef.push({
                name: this.state.newTask,
                type: this.state.newType,
                id: this.state.uid,
            });
        }

        this.setState({newTask: ""});
        this.setState({newType: ""});
        this.setState({uid: ""});
        alert("Task added successfully");
    }

    _renderItem(task) {
        const onTaskCompletion = () => {
            this.tasksRef.child(task._key).remove()
        };
        return (
            <ListItem task={task} onTaskCompletion={onTaskCompletion} />
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar title="to do List"/>                    
                <View style={accountStyles.email_container}>
                    <Text style={accountStyles.email_text}>{this.state.user.email}</Text>
                    <TouchableHighlight onPress={this.logout.bind(this)} style={styles.primaryButton}>
                        <Text style={styles.primaryButtonText}>Logout</Text>
                    </TouchableHighlight>
                </View>
                <ListView
                    dataSource={this.state.dataSource}
                    enableEmptySections={true}
                    renderRow={this._renderItem.bind(this)}
                    style={styles.listView}/>
                <TextInput
                    value={this.state.newTask}
                    style={styles.textEdit}
                    onChangeText={(text) => this.setState({newTask: text})}
                    placeholder="New Task"
                />
                <TextInput
                    value={this.state.newType}
                    style={styles.textEdit}
                    onChangeText={(text1) => this.setState({newType: text1})}
                    placeholder="New Type"
                />
                <FloatingActionButton
                    hideShadow={true}
                    buttonColor="rgba(231,76,60,1)"
                    onPress={this._addTask.bind(this)}/>
            </View>
        );
    }

    logout() {
        this.props.firebaseApp.auth().signOut().then(() => {
            this.props.navigator.push({
                component: Login
            });
        });
    }
}

1 个答案:

答案 0 :(得分:0)

https://www.firebase.com/docs/security/guide/index.html您需要在firebase中设置用户特定的规则。这将使您的查询仅发送特定用户的相关信息。

当我遇到同样的问题时,我在第一个回复FireBase - how to list user-specific data?

中做了这个人说的话

&#34;我按组ID或用户ID存储记录:&#34;

@ user3521011继承我的代码示例:

    static setUserName(userId, userName) {

    let userNamePath = "/user/" + userId + "/details";

    return firebase.database().ref(userNamePath).update({
        userName: userName
    })

}