[ReactNative]APIサーバーのURLをビルド後に変更したい

Question

聞きたいこと

React Nativeで開発したモバイルアプリのテストを開発者やテストチームで実施したいと思っています。
そこで、各開発者が保有している開発環境にデプロイされているAPIサーバーのURLをモバイルアプリ起動後に変更できるようにしたいと思っています。

具体的には、下のコードのTextInputに入力されたURLを全コードで使用できる変数に代入し、APIサーバーからfetchする部分のURLにて該当の変数を使用したいと思っています。

import React, { Component } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { Actions } from 'react-native-router-flux';

export default class DeveloperScreen extends Component {
  render () {
    return (
      <View style={style.container}>
        <TextInput placeholder='APIサーバーのURLを入力する' />
        <Button title='Topページヘ遷移する' onPress={Actions.TopScreen} />
      </View>
    )
  }
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

もしいいアイディアなど有りましたら教えていただきたいです。

Comments

[gentaro]

質問の意図がよくわらないんですが、その実装した方法ではダメだったという意味でしょうか？
実現できているならわざわざ聞くことはないと思うんですが…。

Answer 1

こんにちは

何らかの文字列（このご質問の場合はTextInput から入力されたURL）を、どこの画面からでも使えるように保存しておく方法として、AsyncStorageを使うことが思い浮かびます。

react-native 標準のAsyncStorageは、ドキュメント の冒頭に

Deprecated. Use react-native-community/react-native-async-storage instead.

と書かれているように非推奨になっており、上記に従ってreact-native-community が提供してくれているAsyncStorage を使うのがよいと思われます。

以上、参考になれば幸いです。