フロントから取得したデータをFirestoreに入れたい

Question

タイトルどおり、フロントから取得したデータをFirestoreに入れたいです。

具体的には、アプリの初期登録画面を作成しているのですが、ユーザーがTextinputに入力したテキストをfirestore内に登録したいと考えています。

ただ、他のページへ画面遷移をするために、下記のコードを使用したため、
return()前後にコードを書くことになると思うのですが、
Firebaseの公式で書かれている文章はどこに書けばいいのでしょうか。
return()よりも上の部分に書くのでしょうか。

ご回答よろしくお願いいたします。

import React, { Component } from 'react';
import { StyleSheet,
Text, 
View, 
TextInput, 
Button, 
FlatList, 
SafeAreaView } from 'react-native';

const StartScreen = ({ navigation }) => {
	return (
	//　ここにコードを入れたい
	);
}

export default StartScreen

ちなみに、フロントは以下のようになっています。

const RegisterScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [number, setNumber] = useState('');
  const [note, setNote] = useState('');
  
  function App(){
    const handleCliskButton = () => {
      console.log(email);
      console.log(number);
      console.log(note);
    };
    return (
    <View style={styles.container}>
    <Text>初期登録をしましょう</Text>
    
    <Text>お店の名前</Text>
    <TextInput placeholder="store name" style={styles.input}
      onChangeText={(text) => this.setState({number:text})} />
    <Text>お店の所在地を、郵便番号で登録してください</Text>
    <TextInput placeholder="postcode" style={styles.input}
      onChangeText={(text) => this.setState({number:text})} />
    <Button title="登録する" onPress={() => navigation.navigate("Registered")}/>
    </View>
    );

  }
};

Answer 1

正しく画面の構成が理解できていないかもしれませんが、
RegisterScreen「登録する」ボタンをタップしたタイミングで、Firebase(Cloud Firesotre?)に登録するということでしょうか。
(RegisterScreenのお店の名前・郵便番号を登録するということ？)

---

<Button title="登録する" onPress={() => navigation.navigate("Registered")}/>
現在、onPressでアロー関数式が記述されていて、
他のページへ遷移していると思いますが、
この部分を関数にして、
その中に記述するイメージはどうでしょうか。

const onPress = () => {
  // Cloud Firestore にデータを追加する処理を記述する

  navigation.navigate("Registered")
}
// ...略...
<Button title="登録する" onPress={onPress}/>

---

https://ja.reactjs.org/docs/glossary.html#jsx
リンク先を見ますと、
return ( /* ここにコードを入れたい */ )
returnのカッコの中はReact 要素のようですので、
処理を記述するのは違いそうかな？
と思いました。

---

Reactはあまり回答がつかない印象ですね・・

Comments

[Kaoru]

ご回答いただきありがとうございます！
ごめんなさい、Reactかどうか以前に私の質問の仕方が酷かったですよね、
今一度自身の質問を見て、本当に分かりづらいなと、思いました。
そんな中でご回答いただきありがとうございます。

①正しく画面の構成が理解できていないかもしれませんが、、、、
こちらの質問についてですが、私のミスだったのですが、最初に表示されるのがRegister（初期登録画面）で、登録するをおすと、登録完了画面（Registered）に遷移するという長れを考えておりました。

②現在、onPressでアロー関数式が記述されていて、、、、
こちらについてですが、tearatail上でなかなか回答が無かったので、身近にいるエンジニアの方に聞いたら同様のことをアドバイスされ、無事成功しました！return内おonPressでは、{関数名()}を入れて、その関数の動きをreturn()の上に書くことで、動作しました！

実は、いろいろ事情があって、1週間でReactを学習しながらベースの実装をしようとしていたので、とても基本的なことを聞いてしまっていたと思います。
ですが、ご丁寧にアドバイスいただき本当に嬉しいです。ありがとうございました！

[退会済みユーザー]

ご丁寧なコメントありがとうございます。
いくつか回答をしてきましたが、やっぱり丁寧なコメントをいただけると嬉しいです。
(1週間も前の回答がついていない質問だと放置だったりすることもありますので・・)

でも解決していたようで何よりです！

[Kaoru]

私も、質問を投稿した時は全く返信が無く、閲覧数が増えていくばかりだったので、完全に心が折れていました。
ですが、運よくとても優しい方に回答していただけて嬉しかったですし、本当に助かりました。
ありがとうございます！！！！！
Firebaseの件でも、ご回答いただきありがとうございました＾＾