📌  相关文章
📜  React Native-路由器

📅  最后修改于: 2020-12-08 06:09:28             🧑  作者: Mango

在本章中，我们将了解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 (
         
      )
   }
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

步骤3：添加路由器

现在，我们将在components文件夹中创建Routes组件。它将返回带有多个场景的路由器。每个场景都需要键，组件和标题。路由器使用key属性在场景之间切换，组件将显示在屏幕上，标题将显示在导航栏中。我们还可以将initial属性设置为最初要渲染的场景。

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 = () => (
   
      
         
         
      
   
)
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 (
      
         This is HOME!
      
   )
}
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 (
      
         This is ABOUT
      
   )
}
export default About

该应用程序将呈现初始主屏幕。

反应本机路由器

您可以按按钮切换到关于屏幕。将显示“后退”箭头；您可以使用它返回上一屏幕。

反应本机路由器