如何将插入的id从firebase传递到下一个窗体
如何将插入的id从firebase传递到下一个窗体
提问于 2020-10-07 10:32:07
我是新的反应本机，所以我只需要存储数据从输入文本到火基和制作一个登录表单。我想做一个调查应用程序，有一个表单输入调查数据，然后将id调查传递给下一个表单(用户表单)。我可以在CI或wordpress上做这件事，但我不能在反应本机上这样做。
像这样的水流
调查表单
编辑以显示我的代码调查表单
import React, { Component } from 'react';
import {
Button,
StyleSheet,
TextInput,
ScrollView,
ActivityIndicator,
View,
Text,
SafeAreaView,
TouchableOpacity
} from 'react-native';
import {Ionicons} from "@expo/vector-icons"
import firebase from 'firebase';
export default class PostScreen extends Component {
constructor() {
super();
this.dbRef = firebase.firestore().collection('surveys');
this.state = {
usia: '',
kab: '',
kec: '',
desa: '',
rw: '',
rt: '',
jekel: '',
tps: '',
isLoading: false
};
}
inputValueUpdate = (val, prop) => {
const state = this.state;
state[prop] = val;
this.setState(state);
}
storesurveys() {
if(this.state.usia === ''){
alert('Masukan usia anda!')
}else {
this.setState({
isLoading: true,
});
this.dbRef.doc(this.state.usia).set({
usia: this.state.usia,
kab: this.state.kab,
kec: this.state.kec,
desa: this.state.desa,
rw: this.state.rw,
rt: this.state.rt,
jekel: this.state.jekel,
tps: this.state.tps,
}).then((res) => {
this.setState({
usia: '',
kab: '',
kec: '',
desa: '',
rw: '',
rt: '',
jekel: '',
tps: '',
isLoading: false,
});
this.props.navigation.navigate('Dummy')
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});
}
}
render() {
if(this.state.isLoading){
return(
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={()=> this.props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
</TouchableOpacity>
<TouchableOpacity>
<Text style={{fontWeight:"500"}}>Formulir surveys</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.inputForm}>
<View style={styles.inputGroup}>
<TextInput
placeholder={'usia'}
value={this.state.usia}
onChangeText={(val) => this.inputValueUpdate(val, 'usia')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'kab'}
value={this.state.kab}
onChangeText={(val) => this.inputValueUpdate(val, 'kab')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'kec'}
value={this.state.kec}
onChangeText={(val) => this.inputValueUpdate(val, 'kec')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'desa'}
value={this.state.desa}
onChangeText={(val) => this.inputValueUpdate(val, 'desa')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'rw'}
value={this.state.rw}
onChangeText={(val) => this.inputValueUpdate(val, 'rw')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'rt'}
value={this.state.rt}
onChangeText={(val) => this.inputValueUpdate(val, 'rt')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'jekel'}
value={this.state.jekel}
onChangeText={(val) => this.inputValueUpdate(val, 'jekel')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'tps'}
value={this.state.tps}
onChangeText={(val) => this.inputValueUpdate(val, 'tps')}
/>
</View>
<View style={styles.button}>
<Button
title='Add Survey'
onPress={() => this.storesurveys()}
color="#19AC52"
/>
</View>
</ScrollView>
</SafeAreaView>
);
}
}用户表单NB :我需要将调查表传递给我的用户表单，并插入从调查中插入的id。
import React, { Component } from 'react';
import {
Button,
StyleSheet,
TextInput,
ScrollView,
ActivityIndicator,
View,
Text,
SafeAreaView,
TouchableOpacity
} from 'react-native';
import {Ionicons} from "@expo/vector-icons"
import firebase from 'firebase';
export default class PostScreen extends Component {
constructor() {
super();
this.dbRef = firebase.firestore().collection('penduduk');
this.state = {
nik: '',
nama: '',
tgl_lahir: '',
usia: '',
jekel: '',
survey: '',
isLoading: false
};
}
inputValueUpdate = (val, prop) => {
const state = this.state;
state[prop] = val;
this.setState(state);
}
storePenduduk() {
if(this.state.nik === ''){
alert('Masukan NIK anda!')
}else if(this.state.nama === ''){
alert('Masukan Nama anda!')
}else {
this.setState({
isLoading: true,
});
this.dbRef.doc(this.state.nik).set({
nik: this.state.nik,
nama: this.state.nama,
tgl_lahir: this.state.tgl_lahir,
usia: this.state.usia,
jekel: this.state.jekel,
survey : this.state.survey,
}).then((res) => {
this.setState({
nik: nik,
nama: '',
tgl_lahir: '',
usia: '',
jekel: '',
survey: '',
isLoading: false,
});
this.props.navigation.navigate('Dummy')
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});
}
}
render() {
if(this.state.isLoading){
return(
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={()=> this.props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
</TouchableOpacity>
<TouchableOpacity>
<Text style={{fontWeight:"500"}}>Formulir Penduduk</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.inputForm}>
<View style={styles.inputGroup}>
<TextInput
placeholder={'nik'}
value={this.state.nik}
onChangeText={(val) => this.inputValueUpdate(val, 'nik')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'nama'}
value={this.state.nama}
onChangeText={(val) => this.inputValueUpdate(val, 'nama')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'tgl_lahir'}
value={this.state.tgl_lahir}
onChangeText={(val) => this.inputValueUpdate(val, 'tgl_lahir')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'usia'}
value={this.state.usia}
onChangeText={(val) => this.inputValueUpdate(val, 'usia')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'jekel'}
value={this.state.jekel}
onChangeText={(val) => this.inputValueUpdate(val, 'jekel')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'survey'}
value={this.state.survey}
onChangeText={(val) => this.inputValueUpdate(val, 'survey')}
/>
</View>
<View style={styles.button}>
<Button
title='Add User'
onPress={() => this.storePenduduk()}
color="#19AC52"
/>
</View>
</ScrollView>
</SafeAreaView>
);
}
}有人能给我举个例子/源代码/文档吗？谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-07 10:54:02
第一屏
this.dbRef.doc(this.state.usia).set({
usia: this.state.usia,
kab: this.state.kab,
kec: this.state.kec,
desa: this.state.desa,
rw: this.state.rw,
rt: this.state.rt,
jekel: this.state.jekel,
tps: this.state.tps,
}).then((res) => {
const insertedId = res.id
this.setState({
usia: '',
kab: '',
kec: '',
desa: '',
rw: '',
rt: '',
jekel: '',
tps: '',
isLoading: false,
});
this.props.navigation.navigate('Dummy', {id: insertedId})
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});第二个屏幕：
render() {
if(this.state.isLoading){
const text = this.props.navigation.getParam('id', 'new id');
return(
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}必须遵守this答案的所有规则，以便在下一个屏幕上进行标识。
Stack Overflow用户
发布于 2020-10-07 10:41:59
可以在add()之后插入id；
firebase.firestore().collection("SurveyForm").add({
// inserted values
}). then((docRef) => { const insertedId = docRef.id } })页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64242222
复制相关文章
相似问题
腾讯云开发者
