React Native 　データの保持　コンポーネント間の情報の受け渡し

ログイン後にメールアドレスとパスワードをハッシュ値に変換して個別のデータベースを作り
接続したいと思っています。
LoginForm.jsで入力したメールアドレスとパスワードを保持してHomeScreen.jsで使いたいのですが,参考文献が少なくrefs関数やpropsを使ってうまくできません。
どのようにすれば良いかご享受いただけないでしょうか。
もしくは他の方法を考えた方が良いのであればそのようにご回答いただければもう一度コードを１から見直しますのでよろしくお願いします。
環境は
MacOS Catalina 10.15.6
react-native-cli: 2.0.1
react-native: 0.62.2
です

ReactNative
1LoginForm.js
2
3import React from 'react';
4import { View, TouchableOpacity, Text, TextInput, ActivityIndicator } from 'react-native';
5import firebase from 'firebase';                  //ここ書き方修正
6import 'firebase/firestore';
7import { JSHash, JSHmac, CONSTANTS } from "react-native-hash";
8import HomeScreen from './HomeScreen'
9
10
11
12const config = {
13  apiKey: ,
14  authDomain: ,
15  databaseURL: ,
16  projectId: ,
17  storageBucket: ,
18  messagingSenderId: ,
19};
20
21
22
23if (!firebase.apps.length) {         
24    firebase.initializeApp(config);
25}
26
27const db = firebase.firestore();
28
29
30
31class LoginForm extends React.Component {
32  constructor(props) {
33    super(props);
34
35    this.state = {
36    email: '',
37    password: '',
38    error: '',
39    loading: false,
40    hash:'',
41    edata:'',
42    pdata:''
43  };
44
45}
46
47
48  onButtonPress=()=>{
49    const { email, password,edata,pdata} = this.state;
50    console.log(this.state.email);
51    this.setState({
52      error: '',
53      loading: true,
54    })
55    firebase.auth().signInWithEmailAndPassword(email, password)
56      .then((this.onLoginSuccess.bind(this)))
57      .catch(() => {
58        firebase.auth().createUserWithEmailAndPassword(email, password)
59          .then((this.onLoginSuccess.bind(this)))
60          .catch((this.onLoginFail.bind(this)));
61      });
62  }
63
64
65hash(email,password){
66  JSHmac(email,password, CONSTANTS.HmacAlgorithms.HmacSHA256)
67  .then(hash => db.collection(hash).add({
68      email:this.state.email,
69      password:this.state.password,
70  })
71  .then(function(docRef) {
72      console.log("Document written with ID: ", docRef.id);
73  })
74  .catch(function(error) {
75      console.error("Error adding document: ", error);
76  })
77)
78  .catch(e => console.log(e));
79};
80
81  onLoginSuccess() {
82    return(
83    this.hash(this.state.email,this.state.password)
84  )
85  this.setState({
86      // email:'',
87      // password:'',
88      loading: false,
89      error: ''
90    });
91  }
92
93  // onhand(){
94  //   console.log(this.state.edata),
95  //   console.log("EEEEEEEEE"),
96  //   this.setState({
97  //     email:this.state.edata,
98  //     password:this.state.pdata,
99  //   })
100  // }
101
102  onLoginFail() {
103    this.setState({
104      loading: false,
105      error: 'Authentication Failed'
106    });
107  }
108
109  loadSpinner() {
110    if (this.state.loading) {
111      return <ActivityIndicator size="small" />
112    }
113
114    return (
115      <div>
116      <TouchableOpacity onPress={this.onButtonPress} style={styles.buttonStyle}>
117        <Text>
118        ログイン
119        </Text>
120      </TouchableOpacity>
121      <TouchableOpacity onPress={this.onButtonPress} style={styles.buttonStyle}>
122        <Text>
123        新規登録
124        </Text>
125      </TouchableOpacity>
126      </div>
127    )
128  }
129
130  changeEmail = (text) => {          //TextInputでemailの入力
131       this.setState({
132         email:text
133       });
134       // console.log(this.state.email);
135    }
136
137
138  changePassword = (text) => {                 //TextInputでpasswordの入力
139    this.setState({
140      password:text
141    });
142  }
143
144
145
146
147  // getemail(){
148  //   return this.state.email;
149  // }
150  // getpass=()=>{
151  //   return this.state.password;
152  // }
153
154
155  render() {
156    return (
157      <View>
158        <View>
159          <TextInput
160              placeholder="user@gmail.com"
161              autoCorrect={false}
162              value={this.state.email}
163              onChangeText={this.changeEmail}
164            />
165        </View>
166        <View style={styles.wrap}>
167          <TextInput
168              secureTextEntry
169              placeholder="password"
170              autoCorrect={false}
171              value={this.state.password}
172              onChangeText={this.changePassword}
173            />
174        </View>
175        <View style={styles.wrap}>
176          {this.loadSpinner()}
177        </View>
178      </View>
179    )
180  }
181}
182
183const styles = {
184  // スタイルを記述
185  wrap: {
186    padding: 10
187  },
188  textStyle: {
189    alignSelf: 'center',
190    color: '#007aff',
191    fontSize: 16,
192    fontWeight: '600',
193    paddingBottom: 10,
194    paddingTop: 10
195  },
196  buttonStyle: {
197    flex:1,
198    alignSelf: 'stretch',
199    backgroundColor: '#fff',
200    borderRadius: 5,
201    borderWidth: 1,
202    borderColor: '#007aff'
203  },
204  inputStyle: {
205    color: '#000',
206    paddingRight: 5,
207    paddingLeft: 5,
208    fontSize: 18,
209    lineHeight: 23,
210    height: 30,
211    borderWidth: 1,
212    borderColor: '#333'
213  }
214}
215export default LoginForm;

React
1HomeScreen.js
2
3import { Icon } from 'react-native-vector-icons/FontAwesome';
4import 'react-native-gesture-handler';
5import { NavigationContainer } from '@react-navigation/native';
6import { createStackNavigator } from '@react-navigation/stack';
7import LoginForm from './LoginForm';
8import { JSHash, JSHmac, CONSTANTS } from "react-native-hash";
9// import Login from './LoginForm'
10
11const config = {
12  apiKey: ,
13  authDomain: ,
14  databaseURL:,
15  projectId: ,
16  storageBucket:,
17  messagingSenderId: ,
18};
19
20
21
22if (!firebase.apps.length) {        
23    firebase.initializeApp(config);
24}
25const db = firebase.firestore();  //Firestoreのオブジェクトの取得
26
27
28
29const Stack = createStackNavigator();
30
31class HomeScreen extends React.Component {
32  constructor(props) {
33      super(props);
34      this.state = {
35        name: '',
36        age: '',
37        data:'',
38        email:'',
39        password:''
40      };
41}
42
43
44
45firestoreInput(email,password){ //データベースへの入力
46  JSHmac(email,password, CONSTANTS.HmacAlgorithms.HmacSHA256)
47  .then(hash => db.collection(hash).add({
48      name:this.state.name,
49      age:this.state.age,
50  })
51  .then(function(docRef) {
52      console.log("Document written with ID: ", docRef.id);
53  })
54  .catch(function(error) {
55      console.error("Error adding document: ", error);
56  })
57)
58  .catch(e => console.log(e));
59};
60
61
62firestoreOutput = () =>{                    //データベースからのデータの取得(全件)
63  db.collection("users").get().then((querySnapshot) => {
64    var array = new Array();
65      querySnapshot.forEach((doc) => {
66          var data = doc.data();
67          // console.log(typeof(data));
68          console.log(data);    //{name: "", age: "23"}
69          array.push([doc.id, data.name, data.age]);   /         // array.push(data.name);
70          // array.push(data.age);
71      });
72      console.log(array);
73      this.setState({data:array[0][1]+"さんは"+array[0][2]*2+"歳"});
74  })
75  .catch(function(error) {
76      console.error("データを取得できません: ", error);
77  });
78
79}
80
81
82changeName = (text) => {                //TextInputで名前の入力
83     this.setState({name:text})
84  }
85
86
87changeAge = (text) => {                 //TextInputで年齢の入力
88  this.setState({age:text})
89}
90
91
92  render() {
93    // this.state.email=this.props.email;
94    // this.state.password=this.props.password;
95    // console.log(this.props.email);
96    return (
97      <View style={styles.container}>
98      <TextInput
99        placeholder="名前"
100        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
101        onChangeText={this.changeName}/>
102
103        <TextInput
104        placeholder="年齢"
105        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
106        onChangeText={this.changeAge}/>
107
108
109        <Button
110         icon={{name:"home"}}
111         title="データの登録"
112         style={styles.button1}
113         type="clear"
114         onPress={()=>this.firestoreInput(this.state.email,this.state.password)}
115         />
116
117         <Button
118          icon={{name:"check"}}
119          title="データの呼び出し"
120          style={styles.button2}
121          type="clear"
122          onPress={this.firestoreOutput}
123          />
124      </View>
125    );
126}
127}
128
129
130const styles = StyleSheet.create({
131  container: {
132    // alignItems:'center',   //iosのデザインがかなり崩れるから使わない
133    flex: 1,
134    justifyContent: 'center',
135    backgroundColor: '#E3D7A3',
136    padding: 18,
137  },
138  button1:{
139    margin:10,
140  },
141  button2:{
142    margin:10,
143  },
144  textDBData:{
145     justifyContent: 'center',
146  },
147  paragraph: {
148    margin: 24,
149    fontSize: 18,
150    fontWeight: 'bold',
151    textAlign: 'center',
152  }
153});
154
155export default HomeScreen;

nekoniki

2020/09/01 13:20

現状どうなっているのですか？画面遷移はできるが入力したパラメータが引き継がれない等、いろいろ症状はあると思いますが「うまくいかない」の内容を具体的に教えてください。

iPatch

2020/09/01 13:49

画面遷移はできますが、入力したパラメータの引き継ぎ方がわかりません。 this.props.~を使うのではないかと思ったのですが結局ホームスクリーンに遷移したときにはundefinedになってしまいました。別のクラスの関数を使うといった方法も考えられるのかと思いましたが、未だそれに関しては何もできていません。

nekoniki

2020/09/01 14:26

引継ぎについてはreact-navigationでのnavigateで対応するといけると思いますが、ログイン情報なのでいずれredux管理すると思います。それぞれ詳細な説明と参考文献は回答として載せておきました。