React native 모바일 제품 전시

이 간단한 안내서는 Flotiq Mobile Expo 응용 프로그램 원본 코드를 제품 전시 응용 프로그램으로 조정하는 방법을 보여 줍니다.
사용자에게 다음과 같은 모바일 애플리케이션을 구축합니다.

제품 목록 조회,

제품 상세 정보 읽기,

제품 목록을 검색합니다.

이 프로그램은 당신의 Flotiq 계정과 동기화되기 때문에 CMS를 사용하여 제품을 추가하고 업데이트할 수 있습니다. 이것은 안드로이드와 iOS 핸드폰을 컴파일하여 상자를 열면 바로 사용할 수 있습니다.이 안내서에 필요한 코드 변경은 적지만 Android와 iOS의 작업 환경을 설정하는 데 시간이 걸릴 수 있습니다.

선결 조건

Google Play나 Apple App Store에서 Flotiq mobile expo 응용 프로그램을 다운로드하여 Flotiq 계정에 연결할 수 있도록 권장합니다.이런 방식을 통해 응용 프로그램이 어떻게 작동하는지, 그리고 무엇을 기대할 수 있는지 알게 될 것입니다.

이 문서는 다음과 같이 가정합니다.

이미 registered a free Flotiq account

어떻게 하는지 알아요retrieve your API keys.

다음은 남은 요점입니다.

분기 응용 환매
Flotiq Mobile Expo on GitHub로 넘어가서 우리의 환매를 갈라놓다.코드를 좀 더 쉽게 추적할 수 있도록 변경할 것입니다.만약 네가 유용하다고 생각한다면, 우리에게 별 하나를 주는 것을 잊지 마라!

작업공간 설정

Mac 또는

에 설치XCode

를 통해 Android Studio를 설치합니다.설치가 완료되면 및 JetBrains Toolbox 및 최신 안드로이드 가상 장치

를 시작합니다.

방금 갈라진 git 저장소를 복제하거나 우리의 것을 사용합니다.git clone https://github.com/flotiq/flotiq-mobile-demo

프로젝트 디렉토리에 노드 종속 항목을 설치합니다.npm install

iOS emulator 시작npx react-native run-ios

또는 Android emulator 시작npx react-native run-android

이것은 emulator를 시작하고 Flotiq 프로그램을 시작합니다.
install an emulator
보이는 화면은 Flotiq 계정에 연결할 수 있지만, 원본 코드에 대한 간단한 변경을 통해 이 점을 실현할 것입니다.
문제가 있으면 프로그램 리포의 자술 파일을 참조하십시오.

코드 업데이트

다음은 응용 프로그램을 Flotiq 계정에 연결하고 제품만 표시하기 위해 필요한 절차를 간소화하는 것입니다.

Flotiq API 키를 사용하여 인증

저장소의 코드는 로그인 화면을 사용하여 API 키를 통해 인증됩니다.우리의 Product Showcase 응용 프로그램은 그것을 필요로 하지 않지만, 우리는 여전히 Flotiq API를 사용하여 인증을 해야 한다.

로그인

제품 및 미디어 컨텐츠 유형

작성Flotiq dashboard

열쇠를 복제하다.

이제 다음 행을 App.js 파일에 추가하여 React 코드에 저장합니다.

    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();

파일을 저장한 후, 프로그램은 자동으로 emulator에서 다시 불러오고 로그인 화면을 건너뛰어야 합니다.이제 응용 프로그램의 메인 화면을 보십시오.
scoped API key

간편한 탐색

제품 전시 응용 프로그램의 경우 기본 기본 기본 기본 화면과 내용 유형 브라우저 화면이 아닌 제품 목록으로 바로 이동하기를 원합니다.이를 실현하기 위해서는 내비게이션의 구조를 업데이트해야 합니다.StackNavigator.js 파일을 열고 필요한 조정을 수행합니다.

부품

의{{HomeStackScreen()}}선로를 뜯어내다

삭제RootStackNavigator 상수

에서 Stack.Screen라고 하는 전체ContentTypesScreen

ContentTypesStackScreen 에서 다음과 같이 조정합니다.

첫 번째 행을 메모하고 다음 상수를 추가합니다.

    //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';

파일이 처음 나타나기 전에 다음을 추가합니다ContentTypeObjectsScreen.js.

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

마지막으로 useEffect() 방법에서 contentTypeObjectsScreenOptions 상수를 정적 상수로 바꿉니다.

    const screenTitle = "Products"

이것은 원시 응용 프로그램을 간소화하여 당신이 무엇을 놓치지 않도록 하기 위해서입니다.

변경된 전체 목록 영향

그렇습니다!이제 어플리케이션이 로드된 후 제품 목록을 확인해야 합니다.

이제 너는 그것을 가지고 놀거나 앱스토어에 직접 발표할 수 있다.최초의 응용 프로그램은 이미 애플과 구글 상점의 비준을 받았기 때문에 당신의 응용 프로그램도 비준을 받는 것은 신속하고 간단한 임무가 될 것입니다!
다음을 시도할 수 있습니다.

제품 이미지를 목록에 추가,

제품 상세 정보 화면 수정,

컨텐츠 추가/편집 버튼을 삭제합니다.

즐겁게 놀아라, 네가 무엇을 지었는지 우리에게 말해라!