【6】React Nativeでテキストエディタを作ってみる！【データ管理編】

// panelコンポーネントの上の方
<View style={styles.panelBody}>
   <View style={styles.panelMenu}>
     <Pressable style={styles.button}><Text style={styles.buttonText}>開く</Text></Pressable>
     <Pressable style={styles.button}><Text style={styles.buttonText}>保存</Text></Pressable>
   </View>
 </View>

export function fileData(filetitle, filetext) {
  const filename = filetitle + '.md'
  const date = new Date().toLocaleString()
  return ({
    key: 'loginState',
    id: 'id',
    data: {
      name: filename,
      date: date,
      text: filetext
    }
  })
}

- remove @react-native-community/async-storage from package.json
- run "expo install @react-native-async-storage/async-storage"
- update your imports manually, or run "npx expo-codemod sdk41-async-storage './**/*'".

import AsyncStorage from '@react-native-async-storage/async-storage';
import Storage from 'react-native-storage';

//ストレージの設定
var storage = new Storage({
  // 最大容量, 1000がデフォルト 
  size: 1000,

  // AsyncStorageを使う（WEBでもRNでも）。
  // セットしないとリロードでデータが消えるよ。
  storageBackend: AsyncStorage,

  // （たぶん）キャッシュの期限。デフォルトは一日(1000 * 3600 * 24 milliseconds).
  // nullにも設定できて、期限なしの意味になるよ。
  defaultExpires: 1000 * 3600 * 24,

  // メモリにキャッシュするかどうか。デフォルトは true。
  enableCache: true,

  // リモートシンクの設定（だと思う。）
  sync: {
    // これについては後述
  }
})

export function fileData(filetitle, filetext) {
  const filename = filetitle + '.md'
  const date = new Date().toLocaleString()
  return ({
    key: 'mdfile',
    id: 'id',
    data: {
      name: filename,
      date: date,
      text: filetext
    }
  })
}

export function saveFileData(fileData) {
  storage.save(fileData);
}

export function loadFileData(fileData) {
  storage.load(fileData).then(ret => {
    // ロードに成功したら
    console.log(ret.name + ' is ' + ret.text);
  }).catch(err => {
    // ロードに失敗したら
    console.warn(err.message);
    switch (err.name) {
      case 'NotFoundError':
        // 見つかんなかった場合の処理を書こう
        break;
      case 'ExpiredError':
        // キャッシュ切れの場合の処理を書こう
        break;
    }
  });
}

// App.js
function saveFileData(){
  const firstRowEndPos = textInput.split('\n');
  const filetitle = firstRowEndPos.filter(Boolean)[0]
  S.saveFileData(S.fileData(filetitle, textInput))
}

// App.js
<MyPanel
  saveFileData={saveFileData}
/>

// App.js コンポーネント
function GetAllData() {
  const [data, setData] = useState('')

  useEffect(() => {
    S.GetAllData().then(e => {
      console.log('App.js 4>>'+e);
    })
  }, []);
  console.log(data);
  return(
    <Text>a</Text>
  )
}

// Storage.js 情報取得関数
export async function loadFileData(fileData) {
  const data = await storage.load(fileData).then(ret => {
    return ret
  }).catch(err => {
    console.warn('S 54>>'+ JSON.stringify(fileData.key) + ">>>>" + err.message + ">>>>" +err);
    switch (err.name) {
      case 'NotFoundError':
        break;
      case 'ExpiredError':
        break;
    }
  });
  return data
}

export async function GetAllData(){
    let data = []
    keys = await AsyncStorage.getAllKeys()

  for(let i in keys){
    const key = keys[i];
    const json = await loadFileData({ key: key }); 
    if(!json===false){
      data.push(await loadFileData({ key: key }))
    }
  }
  return data
}

Cannot connect to the Metro server.

Try the following to fix the issue:
- Ensure that the Metro server is running and available on the same network
- Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
- If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
- If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and the port of the local dev server - e.g. 10.0.1.1:8081

URL: packager.mp-kiu.anonymous.reactnative-texteditor.exp.direct:80

const [dataKey, setDataKey] = useState(null)

// App.js
function saveFileData(){
  const firstRowEndPos = textInput.split('\n');
  const filetitle = firstRowEndPos.filter(Boolean)[0]
  let key = dataKey

  if (!key){
    key = 'SimpleMD' + data.length + 1
  }

  if (!textInput===false){
    S.saveFileData(S.fileData(key, filetitle, textInput))
  }else{
    console.log('テキストが入力されていません');
  }
}

// App.js
function saveFileData(){
  const firstRowEndPos = textInput.split('\n');
  const filetitle = firstRowEndPos.filter(Boolean)[0]
  let key = dataKey

  if (!key){
    key = 'SimpleMD' + data.length + 1
  }

  if (!textInput===false){
    S.saveFileData(S.fileData(key, filetitle, textInput))
  }else{
    console.log('テキストが入力されていません');
  }
  getAllData()
}

// App.js
  <Modal
    animationType={'slide'}
    presentationStyle={false}
    transparent={true}
    visible={isModalOpen}
    onRequestClose={()=>{
      console.log('とじるんるん');
    }}
  >
    <View style={styles.centeredView}>
      <View style={styles.modal}>
        <Text>{isSubmit?"保存できました！":"保存できませんでした！"}</Text>
        <Pressable
        style={styles.modalBtn}
        onPress={closeModal}
        >
          <Text style={styles.modalText}>閉じる</Text>
        </Pressable>
      </View>
    </View>
  </Modal>