이 기사에서는 이 인기 있는 라이브러리의 기본 개념과 내비게이션을 통해 React Native 앱을 보다 확장 가능하게 만드는 방법을 이해할 것입니다.

The resources of this tutorial are available on my GitHub repository. Feel free to fork it and try on your own.🚀

색인

반응 탐색이란 무엇입니까?

React Navigation이 포함된 Hello World

여기에서 어디로 가나

반응 탐색이란 무엇입니까?

React Navigation은 React Native 앱에 대한 탐색을 생성해야 할 필요성에서 태어난 라이브러리입니다. 모바일 환경에서 알다시피 다양한 보기로 탐색하는 방법이 많으며 필요한 탐색 또는 애니메이션 종류를 선택할 수 있습니다. 네이티브 플랫폼이 그렇듯이.

이 JavaScript 기반 탐색 라이브러리는 유동적인 전환을 위해 기본 드라이버를 사용합니다. 또한 React Navigation은 Objective C, Swift, Java, Kotlin에 대한 필수 지식을 피하는 이 접근 방식을 채택하여 앱 경험에 더 집중할 수 있습니다.

React Navigation이 있는 Hello World

이 섹션에서는 React Navigation을 더 간단한 방법으로 사용하는 방법을 배우기 위해 React Native에서 매우 간단한 Hello World 앱을 만들 것입니다.

시작하기 전에 React Native CLI를 사용하여 React Native 프로젝트를 초기화하겠습니다.

react-native init easyReactNavigation

생성된 프로젝트 내에서 React Navigation을 package.json 파일에 설치할 차례입니다.

npm install -S react-navigation

# Then install the gesture handler.
npm install -S react-native-gesture-handler

# Link the native dependencies.
react-native link react-native-gesture-handler

다음으로 React Navigation을 사용하여 기본 루트 구성 요소를 구성합니다. 실제로 만들려면 createStackNavigator 이 경우 React 구성 요소를 반환하는 함수인 클래스 App 를 가져와야 합니다. 여기서 는 App.js 에서 직접 내보냅니다.

import { createStackNavigator, createAppContainer } from 'react-navigation'

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Navigation!</Text>
      </View>
    )
  }
}
// Create Stack Navigator gets two props createStackNavigator(routes, config)
const AppNavigator = createStackNavigator({
  Home: App
})
// Container of the app
const AppContainer = createAppContainer(AppNavigator)
export default AppContainer

이 코드를 실행하면 화면 중앙에 인사말 텍스트가 있는 매우 멋진 화면을 볼 수 있습니다. 그러나 약간의 차이가 있지만 보시다시피 헤더가 있습니다. 이 헤더는 Stack Navigator에서 기본적으로 제공됩니다.

보기 탐색

React Navigation에서 새 보기를 만드는 것은 콘텐츠로 새 React 구성 요소를 만드는 것과 같이 간단합니다. 이 연습에서는 화면 중앙에 단순하고 평평한 텍스트만 있는 클래스 구성 요소를 만듭니다.

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!🤓</Text>
      </View>
    )
  }
}

홈 보기에서 새 보기로 리디렉션되는 이벤트가 있는 버튼을 만들어 봅시다. 이를 위해 탐색 소품을 사용하여 새 보기로 이동하는 onPress 이벤트에 대한 메서드를 생성해 보겠습니다.

class App extends React.Component {
  // On Press event 
  onPress = () => {
    // Navigate to the HelloWorld view
    this.props.navigation.navigate('HelloWorld')
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Welcome to React Navigation!</Text>
        <Button 
          title="Tap me 😄"
          onPress={this.onPress}
        />
      </View>
    )
  }
}

새 보기를 Stack Navigator로 가져오는 것을 잊지 마십시오.

const AppNavigator = createStackNavigator({
  Home: App,
  HelloWorld
})

The Stack Navigator provides a transition between screens were each new screen is placed on the top of the stack and it works exactly like a call stack.

드디어 최종 결과가 나왔습니다! 🎉

여기에서 어디로 가나

이 기사는 React Navigation이라는 거대한 라이브러리에 대한 간단한 시작이었습니다. official documentation 을 꽤 멋지게 볼 수 있습니다. 또한 여기 dev.to와 on 및 !에서 저를 팔로우할 수 있습니다.