React-Native, Android

설치

[1] npm i

npm i react-native-screens react-native-safe-area-context
npm i @react-navigation/native @react-navigation/native-stack

[2] 파일 변경

android/app/src/main/java/<your package name>/MainActivity.java 파일 수정

아래의 문구 추가 작성

import android.os.Bundle;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

---

작성

[App.jsx]

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ProfileScreen from './component/ProfileScreen';
import HomeScreen from './component/HomeScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

시작 페이지 지정 => initialRouteName
주소 지정 => name

[HomeScreen.js]

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

const HomeScreen = ({navigation}) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigation.navigate('Profile', {name: 'Jane'})
        }
      />
    </View>
  );
};

export default HomeScreen

const styles = StyleSheet.create({})

navigation.navigate('주소', {params})
navigation.navigate('Profile', {name: 'Jane'})

---

bottom-tab 설치

[1] npm i

npm install @react-navigation/bottom-tabs

bottom-tab 작성

[App.jsx]

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Profile" component={Profile} />
        </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

App에서 작성했던 createNativeStackNavigator를 createBottomTabNavigator로 변경시킨다.

bottom-tab에 icon 추가

Icon 작성법

import Icon from 'react-native-vector-icons/Ionicons'

function App(){
  return (
    <NavigationContainer>
    <Bottom.Navigator>
      <Bottom.Screen name='Status' component={StatusBarCon}
        options={{
          tabBarIcon: ()=>{
            return <Icon name="person" size={30} color="#4F8EF7" />;
          }
          }}/>
    </Bottom.Navigator>
    </NavigationContainer>
  )
}

---

stack 설치

npm i @react-navigation/stack
npm install react-native-gesture-handler

stack작성

---

[ 권장 ] Stack Bottom_tab 함께 사용하기

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screen/HomeScreen";
import SignInScreen from "./screen/SignInScreen";
import ChatRoomScreen from "./screen/ChatRoomScreen";
import CurrentChatRoomScreen from "./screen/CurrentChatRoomScreen";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createStackNavigator();
const Bottom = createBottomTabNavigator();

const Home = () => {
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen}/>
      <Stack.Screen name="SignIn" component={SignInScreen} />
    </Stack.Navigator>
   );
}
const ChatRoom = () =>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="ChatRoomList" component={ChatRoomScreen} />
      <Stack.Screen name="CurrentChatRoom" component={CurrentChatRoomScreen} />
    </Stack.Navigator>
  );
}


function App() {
  return (
    <NavigationContainer>
      <Bottom.Navigator initialRouteName="Main">

        <Bottom.Screen name="Main" component={Home} options={{ headerShown: false }}/>
        <Bottom.Screen name="ChatRoom" component={ChatRoom} options={{ headerShown: false }}/>
        
      </Bottom.Navigator>
    </NavigationContainer>
  );
}


export default App;

---

Button 눌러서 navigation 링크로 이동

const HomeScreen = ({navigation}) => {
  return (
    <Button
      title="타이틀"
      onPress={() =>
        navigation.navigate('Profile',{
    						name: 'Jane'//params로 넘겨줄 값
                            })
      }
    />
  );
};

const ProfileScreen = ({navigation, route}) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

params로 넘겨받은 값은 route.params.params명 으로 받을 수 있다.