Carpool(Resact Native&ExpressとApollo Federation&Mariadb,Mongodb)をインストールし、画面を構成します.

#0 Carpoolプロジェクトの作成

次のコマンドを使用して、プロジェクトを作成します.

mkdir Carpool

これからは、プロジェクトのルートがCarpoolに基づいて実施されます.

#1 reactネイティブインストール

React Nativeのインストールについては、https://iagreebut.tistory.com/81ブログで検索し、リンクを残します.

m 1ベースのMacBookなので、iterm 2をrosettaとして実行し、iterm 2で以下のコマンドを使用してffi、podをインストールしました.

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

次のコマンドを使用してreact nativeをインストールします.

npx react-native init client

#2ホームページ

react nativeがインストールされると、クライアントディレクトリに移動し、srcディレクトリを作成し、実装する資産、lib、common、module、navigator、screens、utilsディレクトリを作成します.ホームページが実施される前にutils/palette.jsという名前のファイルを作成し、将来使用する色を作成します.

./src/utils/palette.js

const palette = {
    red: [
        '#FF0000',
        '#FF3232',
        '#FF4646',
        '#FF5050',
        '#FF5A5A',
        '#FF6347', 
        '#DC143C',
    ],
    blue: [
        '#0000FF',
        '#0000CD',
        '#000080',
        '#00008B',
        '#14148C',
        '#28288C',
        '#2828CD',
        '#191970',
    ],
    white: [
        '#FFFFFF'
    ],
    gray: [
        '#f8f9fa',
        '#f1f3f5',
        '#e9ecef',
        '#dee2e6',
        '#ced4da',
        '#adb5bd',
    ],
    black: [
        '#000000',
        '#282828',
        '#323232',
        '#3c3c3c',
        '#464646',
    ]
} 

export default palette;

カラーファイルが作成され、/src/screenss/に移動します.このディレクトリは、将来、LoginScreen、HomeScreen、ResiterScreenなど、さまざまなページを作成するディレクトリです.ホームという名前のディレクトリを作成してHomeScreenを作成HomeScreenは、ログイン後にユーザーがサービスを利用できるナビゲーションの最初の画面です.

上のUIデザイン画面に基づいてHomeScreenを作成します.

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-vector-icons react-native-screens react-native-safe-area-context react-native-gesture-handler

UIデザイン画面には下部ナビゲーションがあります.上のライブラリをインストールし、下部ナビゲーションを実装してみます.

./src/screens/home/HomeScreen.js

import React from 'react';
import { ScrollView, Text } from 'react-native';

const HomeScreen = () => {
    return(
        <ScrollView>
            <Text>Home Screen</Text>
        </ScrollView>
    );
};

export default HomeScreen;

./src/screens/map/MapScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const MapScreen = () => {
    return(
        <View>
            <Text>Map Screen</Text>
        </View>
    );
};

export default MapScreen;

./src/screens/chat/ChatScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const ChatScreen = () => {
    return(
        <View>
            <Text>Chat Screen</Text>
        </View>
    );
};

export default ChatScreen;

./src/screens/navigation/NavigationScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const NavigationScreen = () => {
    return(
        <View>
            <Text>Navigation Screen</Text>
        </View>
    );
};

export default NavigationScreen;

./src/screens/user/MypageScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const MypageScreen = () => {
    return(
        <View>
            <Text>Mypage Screen</Text>
        </View>
    );
};

export default MypageScreen;

./src/navigator/BottomNavigator.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import palette from '../utils/palette';
import HomeScreen from '../screens/home/HomeScreen';
import MapScreen from '../screens/map/MapScreen';
import ChatScreen from '../screens/chat/ChatScreen';
import NavigationScreen from '../screens/navigation/NavigationScreen';
import MypageScreen from '../screens/user/MypageScreen';

const Tab = createBottomTabNavigator();
const BottomNavigator = ({ route }) => {
    return(
        <Tab.Navigator screenOptions={({ route }) => ({ 
                tabBarIcon: ({ 
                    focused,
                    color
                }) => {
                    var name;
                    
                    if(route.name === 'home') name = focused ? 'home' : 'home-outline';
                    else if(route.name === 'map') name = focused ? 'map' : 'map-outline';
                    else if(route.name === 'chat') name = focused ? 'chatbubble' : 'chatbubble-outline';
                    else if(route.name === 'navigation') name = focused ? 'navigate' : 'navigate-outline';
                    else if(route.name === 'mypage') name = focused ? 'person' : 'person-outline';
                
                    return <Ionicons size={ 28 }
                                     name={ name }
                                     color={ color }
                           />;
                },
                tabBarActiveTintColor: palette.red[4], 
                tabBarInactiveTintColor: palette.gray[4]    
            })}
        >
            <Tab.Screen name="home"
                        component={ HomeScreen }
                        options={{ headerShown: false }}
            />
            <Tab.Screen name="map"
                        component={ MapScreen }
                        options={{ headerShown: false }}
            />
            <Tab.Screen name="chat"
                        component={ ChatScreen }
                        options={{ headerShown: false }}
            />
            <Tab.Screen name="navigation"
                        component={ NavigationScreen }
                        options={{ headerShown: false }}
            />
            <Tab.Screen name="mypage"
                        component={ MypageScreen }
                        options={{ headerShown: false }}
            />
        </Tab.Navigator>
    );
};

export default BottomNavigator;

アイコンがEXPARKと表示されている場合
https://unchae.tistory.com/entry/RN-react-native-vector-icons-%EC%97%91%EB%B0%95%EC%9C%BC%EB%A1%9C-%EB%9C%B0-%EA%B2%BD%EC%9A%B0

5つのアイコンと1つのフォーカス係数を使用して、下部のナビゲータのアイコンをクリックすることで、シェーディングを実現しました.次に、ナビゲーションにアプリケーション全体に対して最下位のナビゲーション構成部品を呼び出させます.
メインナビゲーション用のStack Navigationライブラリをインストールするには、次のコマンドを使用します.

npm install @react-navigation/stack @react-navigation/native

./src/navigator/MainNavigator.js

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from "@react-navigation/native";
import BottomNavigator from "./BottomNavigator";

const Stack = createStackNavigator();
const MainNavigator = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="bottom-nav"
                              component={ BottomNavigator }
                              options={{ headerShown: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default MainNavigator;

このようにStack Naviationを使用してMainNavigatorコンポーネントを作成し、最上位に配置します.jsファイルから呼び出す

App.js

import React from 'react';
import MainNavigator from './src/navigatior/MainNavigator';

const App = () => {
    return(
        <MainNavigator />
    );
};

export default App;

ナビゲーションが完了しました.npm runiosを使用して駆動します.





画面がよく見えるメイン画面のナビゲーションが完了しました.ログイン、登録ユーザーインタフェースを作成します.

リファレンス

react-ネイティブインストール:https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/