반응 탐색

모바일 앱을 연구하면서 개발자가 화면 및 레이아웃 전환을 포함하여 앱의 탐색 측면을 처리하는 기능을 구현할 수 있는 라이브러리를 찾았습니다. 이 라이브러리를 React Navigation이라고 합니다. 약간의 차이점이 있는 React Native Navigation이라는 라이브러리도 있습니다.

React Navigation은 iOS 및 Android에서 기본 탐색 API를 사용하지 않지만 해당 API의 하위 집합을 다시 만듭니다. 이를 통해 타사 JS 플러그인(JavaScript로 작성되었기 때문에), 사용자 정의 등을 추가할 수 있습니다. React Native Navigation의 주요 차이점은 iOS 및 Android에서 기본 탐색 API를 사용한다는 것입니다.

설치

첫 번째 단계는 Xcode 또는 Android Studio를 설치 및 구성하지 않고도 프로젝트를 시작할 수 있도록 하는 Expo 도구를 사용하여 React Native 앱을 설정하는 것입니다.

npm install -g expo-cli

그 다음에:

expo init ProjectName

반응 네이티브 프로젝트를 설정한 후 탐색 라이브러리를 설치합니다.

npm install react-navigation

React Navigation은 스택 내비게이터를 사용하여 사용자가 앱에서 사용하는 경로를 기반으로 화면 표시를 관리합니다. 구성 요소인 화면은 스택되어 있으며, 새 화면으로 이동하면 이 스택의 맨 위에 배치되고 뒤로 이동하면 스택에서 제거됩니다.

스택 내비게이터 사용

구성 요소 폴더에서 두 개의 파일을 만듭니다. Homescreen.js 및 Aboutscreen.js.

// Homescreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class Homescreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
          <Button
          title="Go to About"
          onPress={() => this.props.navigation.navigate('About')}
/>
      </View>
    )
  }
}


// Aboutscreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class Aboutscreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>About Screen</Text>
      </View>
    )
  }
}

App.js에서 react-navigation에서 필요한 것을 가져와서 탐색을 구현합니다. 이것은 루트 App.js에서 내보낸 구성 요소가 React Native 앱 및 해당 하위 항목의 루트 구성 요소 역할을 하기 때문에 수행됩니다.

// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';


export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
});

const AppContainer = createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

createStackNavigator는 앱이 화면 간에 전환할 수 있는 방법을 제공합니다. 여기서 각각의 새 화면은 스택 맨 위에 배치됩니다.

createStackNavigator 함수에 경로 구성 객체를 전달합니다. 홈 및 어바웃 경로는 각각 해당 화면에 속합니다.

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
},{
        initialRouteName: "Home"
});

createStackNavigator 함수는 홈 및 정보 화면 구성 요소 모두에 대한 탐색 소품과 함께 전달되며, 탐색 소품은 지정된 화면 구성 요소로의 탐색을 허용합니다. 다음은 HomeScreen의 버튼에 사용되는 예입니다. 이는 AboutScreen으로 연결됩니다.

<Button title="Go to About" 
onPress={() => this.props.navigation.navigate('About')}
/>

여기에서 자세히 읽을 수 있는 탭 및 서랍 탐색과 같은 다른 유형의 탐색도 있습니다. https://reactnavigation.org/docs/getting-started/# !

참고문헌

https://blog.logrocket.com/react-navigation-vs-react-native-navigation-which-is-right-for-you-3d47c1cd1d63/

https://reactnavigation.org/docs/getting-started

https://blog.logrocket.com/navigating-react-native-apps-using-react-navigation/