React Native - Bộ định tuyến

Trong chương này, chúng ta sẽ hiểu điều hướng trong React Native.

Bước 1: Cài đặt bộ định tuyến

Để bắt đầu, chúng ta cần cài đặt Router. Chúng ta sẽ sử dụng React Native Router Flux trong chương này. Bạn có thể chạy lệnh sau trong terminal, từ thư mục dự án.

npm i react-native-router-flux --save

Bước 2: Toàn bộ Đơn đăng ký

Vì chúng tôi muốn bộ định tuyến của mình xử lý toàn bộ ứng dụng, chúng tôi sẽ thêm nó vào index.ios.js. Đối với Android, bạn có thể làm tương tự trongindex.android.js.

App.js

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'

class reactTutorialApp extends Component {
   render() {
      return (
         <Routes />
      )
   }
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

Bước 3: Thêm Bộ định tuyến

Bây giờ chúng ta sẽ tạo Routesthành phần bên trong thư mục thành phần. Nó sẽ trở lạiRoutervới một số cảnh. Mỗi cảnh sẽ cầnkey, component và title. Bộ định tuyến sử dụng thuộc tính khóa để chuyển đổi giữa các cảnh, thành phần sẽ được hiển thị trên màn hình và tiêu đề sẽ được hiển thị trên thanh điều hướng. Chúng tôi cũng có thể đặtinitial tài sản cho cảnh sẽ được hiển thị ban đầu.

Routes.js

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'

const Routes = () => (
   <Router>
      <Scene key = "root">
         <Scene key = "home" component = {Home} title = "Home" initial = {true} />
         <Scene key = "about" component = {About} title = "About" />
      </Scene>
   </Router>
)
export default Routes

Bước 4: Tạo thành phần

Chúng tôi đã có Homethành phần từ các chương trước; bây giờ, chúng ta cần thêmAboutthành phần. Chúng tôi sẽ thêmgoToAbout và goToHome chức năng chuyển đổi giữa các cảnh.

Home.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

const Home = () => {
   const goToAbout = () => {
      Actions.about()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
         <Text>This is HOME!</Text>
      </TouchableOpacity>
   )
}
export default Home

About.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { Actions } from 'react-native-router-flux'

const About = () => {
   const goToHome = () => {
      Actions.home()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToHome}>
         <Text>This is ABOUT</Text>
      </TouchableOpacity>
   )
}
export default About

Ứng dụng sẽ hiển thị ban đầu Home màn.

Bạn có thể nhấn nút để chuyển sang màn hình giới thiệu. Mũi tên Quay lại sẽ xuất hiện; bạn có thể sử dụng nó để quay lại màn hình trước đó.