反応ネイティブ製品のショーケース

この単純なガイドでは、適応する方法を示しますFlotiq Mobile Expo アプリケーションのソースコードは、製品ショーケースアプリケーションとして動作します.
あなたのユーザーを聞かせてモバイルアプリケーションを構築する:

製品のリストを参照します.

製品の詳細を読む

製品リストを検索します.

アプリはあなたのFlotiqアカウントと同期されるので、追加し、製品を更新するには、CMSを使用することができますし、それが箱の外にAndroidとIOSの携帯電話用にコンパイルされます.このガイドで必要とされるコード変更は最小限ですが、AndroidとIOSの両方の作業環境を設定するのに少し時間がかかるかもしれません.

必要条件

私たちはあなたのGoogle PlayやApple App StoreからFlotiqモバイルExpoのアプリケーションをダウンロードし、Flotiqアカウントでそれを接続することをお勧めします.どのようにアプリケーションが動作し、何を期待することができますこの方法を理解します.

その記事は次のとおりです.

既にregistered a free Flotiq account

あなたは知っているretrieve your API keys .

残りの要点は以下です.

アプリケーションの
移動するFlotiq Mobile Expo on GitHub そして、我々のrepoをフォークしてください.あなたがコードにいくつかの変更を行い、それは後でそれを追跡することが容易になります.あなたはそれが役に立つ場合は星を与えることを忘れないでください!

ワークスペースの設定

インストールXCode あなたのMacまたは

AndroidのスタジオをインストールしますJetBrains Toolbox . インストールされるとinstall an emulator 最近のAndroid仮想デバイス

Gitリポジトリをクローンします.git clone https://github.com/flotiq/flotiq-mobile-demo

プロジェクトディレクトリにノード依存関係をインストールするnpm install

IOSエミュレータを起動しますnpx react-native run-ios

またはAndroidエミュレータを起動しますnpx react-native run-android

これはエミュレータを起動し、flotiqアプリを起動する必要があります.

表示される画面では、Flotiqアカウントに接続できますが、ソースコードの簡単な変更によってこれを行います.
任意の問題がある場合-アプリケーションrepoのREADMEファイルを参照してください.

コード更新

ここにあなたのFlotiqアカウントにアプリを接続し、それを簡素化するために必要な手順は、ので、それだけで製品が表示されます.

あなたのflotiq APIキーで認証します

リポジトリ内のコードは、APIキーで認証するログイン画面を使用します.私たちは私たちの製品ショーケースアプリケーションのためにそれを必要としません、しかし、我々はまだflotiq APIで認証する必要があります.

ログインするFlotiq dashboard

クリエイトアscoped API key 製品とメディア内容タイプのために

キーをコピーします.

今すぐあなたの反応コードでは、次の行を追加することによってApp.js ファイル

    import FlotiqNavigator from './app/navigation/FlotiqNavigator/FlotiqNavigator';
    import contentTypesReducer from './app/store/reducers/contentTypes';
    import authReducer from './app/store/reducers/auth';

    // Add this line after imports:
    AsyncStorage.setItem('flotiqApiKey', "<< YOUR FLOTIQ READ-ONLY API KEY HERE >>");

    enableScreens();

ファイルを保存すると、アプリケーションはエミュレータで自動的にリロードされ、ログイン画面がスキップされます.アプリケーションのホーム画面が表示されるはずです.

ナビゲーションを簡素化する

当社の製品ショーケースアプリケーションの場合は、すぐに、デフォルトのホーム画面とコンテンツタイプのブラウザ画面を表示するの製品リストにスキップしたいと思います.そのためには、ナビゲーションの仕組みを更新する必要があります.
開けるStackNavigator.js ファイルを作成し、必要な調整を行います.

削除する{{HomeStackScreen()}} ラインインザRootStackNavigator コンポーネント

全体を取り除くStack.Screen 呼ばれるContentTypesScreen にContentTypesStackScreen 定数

以下の調整を行いますContentTypeObjectsScreen.js

最初の行からコメントを返します.

    //const { contentTypeName, partOfTitleProps, withReachTextProps, refetchData, contentTypeLabel } = props.route.params;
    const contentTypeName = 'product'
    const partOfTitleProps = ['name']
    const withReachTextProps = ['description']
    const refetchData = true

さて、適切にスプラッシュ画面を非表示にするには、次のインポート文を追加します.

    import SplashScreen from 'react-native-splash-screen';

を追加し、useEffect() ファイルに現れる最初の前に

    useEffect(() => {
        if (!isLoading) {
            SplashScreen.hide();
        }
    }, [isLoading]);

最後にcontentTypeObjectsScreenOptions メソッド置換screenTitle 静的なものでconst :

    const screenTitle = "Products"

ここではfull list of changes 場合は、何かを逃した場合、元のアプリを簡素化するために作らなければならない.

効果

それだ!すぐにアプリケーションが読み込まれた後、製品リストを表示する必要があります:

今、あなたは行くことができるとそれを再生したり、App Storeに直接それを公開します.元のアプリケーションはすでにアップルとGoogleの店で承認されているので、それはあなたのアプリも承認を得るために迅速かつ容易なタスクである必要があります!
試すことのできるアイデア

リストに製品イメージを加えてください.

製品の詳細画面を変更します.

追加/編集コンテンツボタンを削除します.

楽しんで、あなたが構築したものを教えて!