ReactNativeでProfile画面を作る（とりあえず画面制作とイベント確認のみ）


## やりたいこと

下記のような画面を作る。

![スクリーンショット 2019-09-30 9.02.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/a4f89de8-54b4-6a7f-dfb5-ae6cddaf43ea.png "スクリーンショット 2019-09-30 9.02.12.png")

## 環境

* expo使います。


## 準備

react-native-elementsを中心に、アイコン表示にreact-native-vector-iconsを。スイッチの表示にtoggle-switch-react-nativeを利用してみます。

```bash
npm install --save react-native-elements
npm install --save react-native-vector-icons
npm install --save toggle-switch-react-native
```

## 実装

### App.js

まいどおなじみApp.jsに全部実装します。

```js:App
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView } from 'react-native';
import { ListItem, Avatar, Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import Icon5 from 'react-native-vector-icons/FontAwesome5';
import ToggleSwitch from 'toggle-switch-react-native';

const user = {
    uid: 'xxxxxxxxx',
    email: 'test@test.com',
    address: '東京都千代田区丸の内1-1-1',
    tel: '03-1234-5678'
}

export default class App extends React.Component {

    state = {
        sms: true,
    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: "#eee" }}>
                <ScrollView>
                    <View style={{ marginTop: 40, alignItems: 'center' }}>
                        <Avatar
                            size="medium"
                            title="OP"
                            rounded
                            source={{ uri: "http://www.bluecode.jp/images/shiro.jpg" }}
                            onPress={() => alert("変更しますか？")}
                        />
                    </View>
                    <Text style={{ alignSelf: 'center', margin: 20 }}>基本情報</Text>
                    <View style={{ marginTop: 0, width: '100%', alignSelf: 'center' }}>
                        <ListItem
                            // key={1}
                            title={"UID: " + user.uid}
                            leftIcon={<Icon5 name={'id-card'} size={20} color="#b0c4de" />}
                            bottomDivider
                            titleStyle={{ color: "#aaa" }}
                        // chevron
                        // onPress={() => alert("UID")}
                        />
                        <ListItem
                            // key={2}
                            title={"EMail: " + user.email}
                            leftIcon={<Icon5 name={'envelope'} size={20} color="#66cdaa" />}
                            bottomDivider
                            chevron
                            onPress={() => alert("EMail")}
                        />
                    </View>
                    <Text style={{ alignSelf: 'center', margin: 20 }}>拡張情報</Text>
                    <View style={{ marginTop: 0, width: '100%', alignSelf: 'center' }}>
                        <ListItem
                            // key={1}
                            title={"Phone: " + user.tel}
                            leftIcon={<Icon5 name={'phone'} size={20} color="#ffd700" />}
                            bottomDivider
                            chevron
                            onPress={() => alert("Phone")}
                        />
                        <ListItem
                            // key={2}
                            title={"住所: " + user.address}
                            leftIcon={<Icon5 name={'at'} size={20} color="#ff69b4" />}
                            bottomDivider
                            chevron
                            onPress={() => alert("住所")}
                        />
                        <ListItem
                            // key={2}
                            title={
                                <View style={{ flexDirection: "row", alignItems: 'center' }}>
                                    <Text style={{ fontSize: 16, marginRight: 20 }}>配信：</Text>
                                    <ToggleSwitch
                                        isOn={this.state.sms}
                                        onToggle={isOn => this.setState({ sms: !this.state.sms })}
                                    />
                                </View>
                            }
                            leftIcon={<Icon5 name={'sms'} size={20} color="#228b22" />}
                            bottomDivider
                        />
                    </View>
                    <Text style={{ alignSelf: 'center', margin: 20 }}>その他</Text>
                    <Button
                        title="ログアウト"
                        buttonStyle={{ width: 300, alignSelf: 'center' }}
                    />
                </ScrollView>
            </SafeAreaView>
        );
    }
}
```

## 考察

react-native-elementsのListItemを中心に使う。
今度、時間ができたらnavigationやfirebaseとかと組み合わせてみます。