반응 네이티브 라우팅 점프를 구현하는 방법

React Native 경로 점프 구현 방법: 1. "yarn add React-navigation" 명령을 사용하여 "react-navigation"을 설치합니다. 2. "yarn add React-native-gesture-handler" 명령을 사용하여 "react"를 설치합니다. -native-gesture-handler" 구성 요소; 3. 초기 경로를 설정한 다음 이를 클래스 구성 요소로 내보냅니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React Native 버전 0.67, Dell G3 컴퓨터.

반응 기본 경로 점프를 구현하는 방법은 무엇입니까?

React Native-Route Jump

RN 개발 환경을 설정한 후 여러 페이지 간 점프를 구현해야 합니다.

1. 이때 React-navigation을 설치해야 합니다(이전 Navigator 및 이전 Navigation은 폐기됨).

2.react-navigation은 React-native-gesture-handler 구성요소에 따라 달라지므로, Yarn add React-native-gesture-handler 명령을 사용하여 설치해야 합니다.

3 두 구성 요소가 성공적으로 설치된 후 setup.js를 참조하여 index.js(항목 파일, index.android.js 또는 index.ios.js일 수 있음)에 앱 구성 요소를 등록합니다.

4. setup.js에서 createStackNavigator, createAppContainer 두 개의 함수와 두 개의 페이지를 가져옵니다.

import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";

5. createStackNavigator를 사용하여 두 페이지의 라우팅 및 제목 구성을 캡슐화하고 초기 라우팅을 설정합니다.

const AppNavigator = createStackNavigator({
    Login: {
        screen:Login,
        navigationOptions: {
            title: '冷链物流助手',
            headerTitleStyle:{
                textAlign: 'center',
                flex:1,
            }
        }
    },
    ScanDevice: {
        screen:ScanDevice,
        navigationOptions: {
            title: '扫描设备',
            headerTitleStyle:{
                textAlign: 'center',
                marginLeft:-25,
                flex:1,
            }
        }
    },
},{
    initialRouteName: 'Login'
});

6. 구성된 AppNavigator를 다른 함수 createAppContainer로 캡슐화한 다음 이를 클래스 구성 요소로 내보냅니다.

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

7. 오류가 있으면 Google에 문의하여 단계별로 해결하세요. Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED 오류가 발생하면 https://www.php.cn/link/be47acb6bb8806ab820fd1081686a767을 따라 문제를 해결하세요.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 네이티브 라우팅 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!