实现当点击图像时从底部弹出的选择栏（操作面板）。

我认为这个功能通常用于设置应用程序图标和照片。实际上，它经常用于设置iPhone的Apple ID图标和LINE的封面照片。

安装所需的库以创建项目。

首先，创建一个React-Native项目。
顺便提一下，我们将使用纯ReactNative进行开发，而不是Expo。
请参考文档或其他资料来了解如何创建项目。

安装所需的库。

对于yarn来说，可以使用yarn add react-native-cross-actionsheet。对于npm来说，可以使用npm install react-native-cross-actionsheet。

####iOSだけの実装ならReactNativeの標準に入ってるのでインストールする必要はないです
実はReactNativeの公式にActionSheetIOSという同じようなUIを作れるものがありますが、それだとiOSにしか実装できません。
iOSだけならそれでもいいですが、Androidも作る予定の人はライブラリをインストールしてください。
作り方自体はほとんど一緒です。

##実装
今回はアクションシート用のコンポーネントを作成して、それをApp.jsから呼び出しているかたちです

```javascript
import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import { ActionSheetPage } from './src/components/ActionSheet';

const App = () => {
  return (
    <View style={styles.screen}>
      <ActionSheetPage/>
    </View>
  );
};

const styles = StyleSheet.create({
 screen: {
   flex:1,
   justifyContent:'center',
   alignItems:'center'
 }
});

export default App;

接下来，我们将创建一个用于实现操作表的组件。

import React from 'react';
import {TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export const ActionSheetPage = () => {
  return (
    <View>
      <TouchableOpacity>
        <View>
          <Icon name="user-o" size={70} />
        </View>
      </TouchableOpacity>
    </View>
  );
};

我们将创建一个基础，并使用TouchableOpacity在点击时使用操作表进行行为。

import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {ActionSheet} from 'react-native-cross-actionsheet';
import Icon from 'react-native-vector-icons/FontAwesome';

export const ActionSheetPage = () => {
  const onPressAction = () => {
    return ActionSheet.options({
      options: [
        {text: '写真を撮る', onPress: () => console.log('create')},
        {text: '写真を選択', onPress: () => console.log('update')},
      ],
      cancel: {text: 'キャンセル'},
    });
  };

  return (
    <View>
      <TouchableOpacity onPress={onPressAction}>
        <View style={styles.iconButton}>
          <Icon style={styles.icon} name="user-o" size={70} />
        </View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  iconButton: {
    borderWidth: 1,
    width: 100,
    height: 100,
    borderRadius: 100,
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  icon: {
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: 'auto',
    marginBottom: 'auto',
  },
});

意外地容易地实施！