プロフ編集画面追加：React Native

作成：2023年1月16日
・React Native + Expo + Amplify + NativeBase + React Navigation でアプリ試作してます。
　今回はプロフ編集画面を追加します： React Navigation, NativeBase
・本記事は次の記事の続きです：[GraphQL でユーザを選択してデータ取得](https://qiita.com/RYO_/items/97cad1aab539bd82e671)

# プロフ画面追加

ProfileEditScreen　を追加します。
```javascript:App.js
function App() {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <NavigationContainer>
          <Stack2.Navigator initialRouteName="Home">
            <Stack2.Screen name="Home" component={HomeScreen} />
            <Stack2.Screen name="Profile" component={ProfileScreen} />
            <Stack2.Screen name="Profile Edit" component={ProfileEditScreen} />
          </Stack2.Navigator>
        </NavigationContainer>
      </Authenticator>
    </Authenticator.Provider>
  );
}
```


# Profile画面からProfileEdit画面へのリンク追加
```javascript:App.js
...
function ProfileScreen() {
  const navigation = useNavigation();
...
          <Button
            title="Profile編集画面へ"
            onPress={() => navigation.navigate("ProfileEdit")}
...
```
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/cc74c901-7896-2eef-9965-4e2aecbce32a.png">

# ButtonをNativeBaseへ変更
これまで Button は react-native を使っていましたが、native-base に変更しました（[参考リンク](https://docs.nativebase.io/button)）
```javascript:App.js
import { Button } from "native-base";
...
<Button onPress={() => navigation.navigate("ProfileEdit")}>Profile編集画面へ</Button>
```
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/99304400-d9f7-dd9d-0c8a-20fa3f1c859a.png">

# ProfileEdit関数の追加
まず手始めにEmailを入力できる様にします。

react-native-paperを導入します
```
yarn add react-native-paper
```

/src/screens/ProfileEditScreen.js を追加します（コードのgithub置き場：[qiita20230116](https://github.com/ryoyuki6/native-base-amplify20230101/blob/qiita20230116/src/screens/ProfileEditScreen.js)）
TextInput に苦労しました。
```javascript:ProfileEditScreen.js
import React, { useState } from "react";
import { StyleSheet, KeyboardAvoidingView, platform } from "react-native";
import { TextInput, Button } from "react-native-paper";

export const ProfileEditScreen = () => {
  const [text, setText] = useState("");

  const onPressSave = () => {
    alert(text);
  };

  return (
    <KeyboardAvoidingView style={styles.container}>
      <TextInput
        style={{ marginBottom: 16 }}
        mode="outlined"
        placeholder="登録するメールアドレスを入力してください"
        multiline
        onChangeText={(text) => setText(text)}
      />
      <Button mode="contained" onPress={onPressSave} Ï>
        登録
      </Button>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});
```

実行します。
```
% yarn ios
```
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/a6622b81-ed02-39ab-63dd-54670d7a4513.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/52038c88-6fef-0d73-0d9c-776bc2829d18.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/9f32fc2c-052a-d3f0-5209-2c3929d074d9.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/88f58565-dca2-87f0-06eb-fe8d93c5337c.png">
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/fcc575d3-1b6c-11bd-8dfb-e342d6a2a16a.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/8cfcc9a6-d4de-ad8a-872b-2c84404e66ae.png">
入力したメールアドレスの値を取得して、まずはアラート表示しました。次は、取得した値を GraphQL で Amplify(DynamoDB) に登録してみたいと思います。