ReactNativeアプリ作成時に使ったライブラリその他

概要

ReactNativeアプリにWEBの、タグとwindows.confirmに相当する機能を実装する

目次

1. inputの実装
2. selectの実装
3. confirmダイアログの実装

1. inputの実装

react-nativeのTextInputを使用する
参照

Main.js

import React,{ useState,useEffect,useRef,Component,useContext } from 'react';
import { TextInput } from 'react-native';

const Main: () => Node = (props) => {

  const [selectHour, setSelectHour] = React.useState('');

  return(
    <TextInput
      onChangeText={(text) => setTextValue(text)}
      value={'defaultValue'}
      placeholder="仮"
      maxLength={13}
    />

  );
export default Main;

2. selectの実装

react-native-picker-selectを使ってdropdownメニュー機能を実装する
参照１
参照２

ライブラリをインストールする

$ npm npm install react-native-picker-select

以下1時から24時のプルダウンのサンプル
pickerSelectStyles.inputIOSとpickerSelectStyles.inputAndroidでiphoneとAndroidのスタイルを別に記載する

Main.js

import RNPickerSelect from 'react-native-picker-select';


const Main: () => Node = (props) => {

  const [selectHour, setSelectHour] = React.useState('24');

  var hourItems = [];
  for(var i=1;i<24+1;i++) {
    var hour = String(24+1-i);
    var labHour = String(24+1-i);
    if(labHour.length==1) {
      labHour = '0' + labHour;
    }
    hourItems.push({
      label: labHour+' 時',
      value: hour
    });
  }

  const pickerSelectStyles = StyleSheet.create({
    inputIOS: {
      fontSize: 28,
      paddingVertical: 12,
      paddingHorizontal: 10,
      borderWidth: 1,
      borderColor: '#789',
      borderRadius: 4,
      color: '#789',
      paddingRight: 30, // to ensure the text is never behind the icon
      width: 300,
      marginLeft: 30
    },
    inputAndroid: {
      fontSize: 30,
      paddingHorizontal: 10,
      paddingVertical: 8,
      borderWidth: 0,
      borderColor: '#789',
      borderRadius: 8,
      color: 'black',
      paddingRight: 30, // to ensure the text is never behind the icon
      width: 130,
      marginLeft: 30,
      backgroundColor:'#ffffff',
    },
  });

  return(
    <RNPickerSelect
      value={'24'}
      onValueChange={(value) => setSelectHour(value)}
      items={hourItems}
      placeholder={{ label: '[時間]', value: '' }}
      style={pickerSelectStyles}
      useNativeAndroidPickerStyle={false}
      Icon={() => (<Text style={{ position: 'absolute', right: 10, top: 15, fontSize: 18, color: '#789' }}>▼</Text>
    />
  );
export default Main;

3. confirmダイアログの実装

react-native-simple-dialogsをインストールする

$ npm npm install react-native-simple-dialogs

Viewの中にConfirmDialogを作成しておき、visibleをstateで制御してダイアログを表示する
以下削除確認のサンプル

Main.js

import { ConfirmDialog } from 'react-native-simple-dialogs';


const Main: () => Node = (props) => {

  const [dialogVisible, setDialogVisible] = React.useState(false);

  /* 削除確認 */
  const confirmDelete = () => {
    setDialogVisible(true);
  }

  /* 削除処理 */
  const execDelete = () => {
    /* 削除処理実行 */

    setDialogVisible(false);
  }


  return(
    <View>
      <View>
・・・
//メインコンテンツ
・・・
      </View>
      <ConfirmDialog
        title="削除"
        message="削除処理を実行しますか？"
        visible={dialogVisible}
        positiveButton={{
          title: 'はい',
          onPress: () => {
            execDelete();
          }
        }}
        negativeButton={{
        title: 'いいえ',
          onPress: () => {
            setDialogVisible(false);
          }
        }}
      />
    </View>
  );
}
export default Main;