React Native - เราเตอร์

ในบทนี้เราจะเข้าใจการนำทางใน React Native

ขั้นตอนที่ 1: ติดตั้งเราเตอร์

ในการเริ่มต้นเราต้องติดตั้งไฟล์ Router. เราจะใช้ React Native Router Flux ในบทนี้ คุณสามารถรันคำสั่งต่อไปนี้ในเทอร์มินัลจากโฟลเดอร์โครงการ

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

ขั้นตอนที่ 2: แอปพลิเคชันทั้งหมด

เนื่องจากเราต้องการให้เราเตอร์ของเราจัดการแอปพลิเคชันทั้งหมดเราจะเพิ่มเข้าไป index.ios.js. สำหรับ Android คุณสามารถทำได้ในรูปแบบindex.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)

ขั้นตอนที่ 3: เพิ่มเราเตอร์

ตอนนี้เราจะสร้างไฟล์ Routesส่วนประกอบภายในโฟลเดอร์ส่วนประกอบ มันจะกลับมาRouterมีหลายฉาก แต่ละฉากจะต้องkey, component และ title. เราเตอร์ใช้คุณสมบัติหลักเพื่อสลับไปมาระหว่างฉากส่วนประกอบจะแสดงบนหน้าจอและชื่อเรื่องจะแสดงในแถบนำทาง เรายังสามารถตั้งค่าไฟล์initial คุณสมบัติของฉากที่จะแสดงในตอนแรก

เส้นทาง 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

ขั้นตอนที่ 4: สร้างส่วนประกอบ

เรามีไฟล์ Homeส่วนประกอบจากบทก่อนหน้า ตอนนี้เราต้องเพิ่มไฟล์Aboutส่วนประกอบ. เราจะเพิ่มไฟล์goToAbout และ goToHome ฟังก์ชั่นเพื่อสลับระหว่างฉากต่างๆ

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

แอพจะแสดงผลเริ่มต้น Home หน้าจอ

คุณสามารถกดปุ่มเพื่อสลับไปยังหน้าจอเกี่ยวกับ ลูกศรย้อนกลับจะปรากฏขึ้น คุณสามารถใช้เพื่อกลับไปที่หน้าจอก่อนหน้า