fatal: not a git repository (or any of the parent directories): .git

# 원인

현재 폴더에 git에 대한 정보를 담은 파일이 없기 때문에 발생하는 에러.

# 해결

$ git init 수행후 다시 $ git remote add 명령어 실행

오픈소스로 모바일에 최적화된 데이터베이스 라이브러리이다. Realm의 데이터는 쿼리, 필터링, 상호연결이 가능하고 저장이 된다. Realm은 객체 형태로 데이터를 읽어오고 객체 형태로 DB에 저장이 가능하다.

▶ Refer to https://docs.mongodb.com/realm/sdk/react-native/ ▶ Refer to https://docs.mongodb.com/realm/tutorial/react-native/

Install

npm install realm

Use

1. 리액트 네이티브 설치

2. MongoDB Realm 활용

npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context

1. 리액트네이티브 설치 npx react-native init [AwesomeProject]

2. Metro 실행 npm start || npx react-native start

   What is Metro?

3. 어플리케이션 실행 npm run android || npm run ios

1. value는 Animated.Value()를 쓴다.

   • state에 value를 넣지 않는다

     // 예시
     const [y, setY] = useState(0); (x)
     const Y = new Animated.Value(0);

2. value 값을 직접 정하지 않는다. Animated API를 사용하여 value값을 준다.

   // 예시
   const Y = new Animated.Value(0); // Animated Api를 이용하여 value 넣는다
   Y = 20; // 직접 할당하지 않는다.

3. Animatable components에만 Animation을 줄 수 있다. 아무 컴포넌트에다가 애니메이션을 줄 수 없다.

• Animation 사용 가능한 컴포넌트
• 사용가능한 컴포넌트 외 Animation을 적용하고 싶다면 createAnimatedComponent() 함수를 사용한다.

# Animatable Component 아닌 컴포넌트 사용하기

1. Way 1 스타일컴포넌트이면서 Animatable 컴포넌트

2. Way 2

박스 터치를 하면 0.01초?마다 1px씩 이동하며 y축이 200이 되면 clearInterval

github 4.2

리액트 네이티브 생성

1. 설치 npx react-native init [AwesomeProject]

2. Metro 실행 npm start || npx react-native start

3. 어플리케이션 실행 npm run android || npm run ios

# 네비게이터 -> 네비게이터

// 네비게이터 이동
navigation.navigate("Stack", { screen: "Detail" })

// 네비게이터 이동 + 파라미터 전달
navigation.navigate("Stack", {
  screen: "Detail",
  params: { user: "jane" }
});

// Detail.js
const Detail = () => { } // 기본

const Detail = ({ route, navigation }) => { 
  const { user } = route.params; // "jane"

  useEffect(() => {
    navigation.setOptions({
      title: "title"
    })
}, []);


const Detail = ({ navigation: {setOptions}, route: { params: { user }} }) => { 
  useEffect(() => {
    navigation.setOptions({
      title: "title"
    })
}, []);

• navigation.setOptions는 헤더(타이틀) 변경 시에 사용합니다. ▶ Refer to https://reactnavigation.org/docs/navigation-prop#setoptions

# Props

• loop swiper 끝까지 가면 맨 처음화면으로 돌아옴

• timeout <Swiper timeout={2} /> 2초마다 swiper

• controlsEnabled controlsEnabled={false} 하단 컨트롤러(점, 버튼 제어) 안보임

스타일 컴포넌트에서도 다크모드를 적용할 수 있다

• 현재 적용된 스키마를 확인한다
• <ThemeProvider />를 통해서 현재 테마의 다크모드 여부에 따라 적용한다
• <ThemeProvider />가 네비게이터 컨테이너를 감싸고 있기 때문에 하위 컴포넌트들에게 테마 적용이 된다.

• CSS 코드를 Native Component가 써도 스타일 적용됨

1. Install

npm i styled-components

2. import

import styled from "styled-components/native";

• 뒤에 /native는 꼭 써줘야함!

• styled Components는 브라우저에서도 작동하기 때문에 native에서 사용하는 태그(?)를 위해서

  import styled from "styled-components"; // 브라우저용
  import styled from "styled-components/native"; // native용
  

styled.div// 브라우저용 styled.View // native용

## # Use
- `styled Components` 조건문 사용

const Title = styled.Textcolor: ${ (props) => (props.selected ? "blue" : "red" )}

...

npm install @react-navigation/native-stack

# Use

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Text, TouchableOpacity } from "react-native";


const Stack = createNativeStackNavigator();

const Home = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate("Profile")}>
      <Text>go to Profile</Text>
    </TouchableOpacity>
  )
};

const Profile = ({ navigation: { setOptions } }) => {
  return (
    <TouchableOpacity onPress={() => setOptions({title: "change"})}>
      <Text>go to Settings</Text>
    </TouchableOpacity>
  )
};

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

# Navigation prop reference

# Refer to

● navigation prop > https://reactnavigation.org/docs/navigation-prop ● Native Stack Navigator > https://reactnavigation.org/docs/native-stack-navigator

▶ Refer to https://reactnavigation.org/docs/bottom-tab-navigator

// 예시
 <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />

• Function that given { focused: boolean, color: string, size: number } returns a React.Node, to display in the tab bar.
• 함수이고 React.Node로 반환한다.
• 매개변수는 Object이고 각각 옵션 설정 가능하다.
• focused 여부에 따라 현재 선택된 아이콘 변경 가능

# 아이콘 선택(Movies)

# 아이콘 미선택(Movies)

1. Install

npm i react-native-vector-icons

2. Setting

• android/app/build.gradle 추가

  project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] 
  ] // 추가
  

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" // 추가

<br />

- ### `android/settings.gradle` 추가

include ':react-native-vector-icons' // 추가 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') // 추기

<br />

- ### `android/app/build.gradle` 추가

dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation "com.android.support:appcompat-v7:23.0.1" implementation "com.facebook.react:react-native:+" // From node_modules implementation project(':react-native-vector-icons') // 추가 }

```

• node_modules/react-native-vector-icons/Fonts/하위 파일들을 android/app/src/main/assets/fonts 폴더로 복사
  • assets/fonts 폴더 없으면 생성

3. Result

1. useColorScheme()
   • react-native API ▶ Refer to https://reactnative.dev/docs/usecolorscheme

2. Themes
   • react-navigation ▶ Refer to https://reactnavigation.org/docs/themes/
   • NavigationContainer 에 적용
   • 모든 스크린에 적용됨

import { useColorScheme } from 'react-native';
import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from '@react-navigation/native';

export default () => {
  const scheme = useColorScheme();

  return (
    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* content */}
    </NavigationContainer>
  );
};

# Bottom Tab

1. Install

npm install @react-navigation/bottom-tabs

2. Use

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Movies" component={Movie} />
      <Tab.Screen name="Tv" component={Tv} />
      <Tab.Screen name="Search" component={Search} />
    </Tab.Navigator>
  );
}

3. Props

1. initialRouteName 첫 번째로 렌더링 될 route

4. Options

• 모든 화면에 옵션을 저장하고 싶다면 Tab.Navigator 안에서 지정한다.

• 탭 요소마다 옵션을 지정하고 싶다면 Tab.Screen 태그 안에서 지정한다.

# 요소

1. tabBarStyle : 하단 탭 스타일
2. tabBarActiveTintColor : 선택된 탭만 색깔 바뀜
3. tabBarInactiveTintColor : 선택되지 않은 탭 색깔 바뀜

+ Note

1. Navitaion을 사용할 때에는 NavigationContainer로 감싸주어야 한다.
2. <Tab.Screen name="Movies" component={Movie} /> <Tab.Screen>의 name은 헤더와 하단 탭명, component는 내용을 나타낸다.