如何使用StackNavigator创建动态路由 [英] How to create dynamic routes using StackNavigator

问题描述

我试图学习如何在react-native上使用React Navigation，偶然发现了这篇文章:

I am trying to learn how to use React Navigation on react-native and stumbled upon this article: https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4. It explains how to create a 3 level navigation with fixed routes. My question is how do you go about creating a 3 or more levels of navigation when some of the routes should be dynamic. The screen structure would look something like this:

Physics
    |- Physics 101
         |- Chapter 1
         |- Chapter 2    
         |- Chapter 3
    |- Physics 201
         |- Chapter 1
         |- Chapter 2
         |- Chapter 3
         |- Chapter 4
         |- Chapter 5
    |- Physics 305
         |- Chapter 1
         |- Chapter 2
         |- Chapter 3
         |- Chapter 4
         |- Chapter 5
         |- Chapter 6
         |- Chapter 7
         |- Chapter 8

因此，从该结构来看，物理"将是包含3个固定导航项目的主屏幕，在其中单击一个时，它将带您进入具有更多导航项目的另一个屏幕.需要注意的一件事是，当您在主屏幕上时，直到单击一个项目，您才知道每个项目有多少个子导航项目.

So looking at that structure, Physics would be the main screen that contains 3 fixed navigation items, where when you click on one, it would take you to another screen with more navigation items. One thing to note is that when you're on the main screen, you wouldn't know how many child nav items each of the items would have until you click into one.

例如，如果单击Physics 101，您将被带到具有3条路线的屏幕，其中每条路线将显示本章的内容.点击Physics 305，将带您进入一个包含8个导航项目的屏幕，等等.

For example, if you click on Physics 101, you'd be taken to a screen with 3 routes where each will show the content of the chapter. Clicking on Physics 305 would take you to a screen with 8 navigation items, etc.

当您在选择一个项目之前不知道需要创建多少条路线/导航项目时，我不太确定如何在此处使用StackNavigator.

I am just not too sure on how to use StackNavigator there when you don't know how many routes/navigation items need to be created until you've selected an item.

帮助?

更新 这是我现在拥有的代码，可帮助列出Subject，然后点按它会显示所有Units，但是我仍然不确定如何创建一个新屏幕，然后列出其中的所有章节.单元，其中每个单元的章数不同.

Update Here's the code I have right now which helps with listing out the Subject, then on tap, it shows all the Units, but I am still not sure how to create a new screen that then lists out all the chapters in a unit, where the number of chapters are different for each unit.

// router.js
export const SubjectStack = StackNavigator({
  Subjects: {
    screen: Subjects,
    navigationOptions: {
      title: 'Subjects',
    }
  },
  Units: {
    screen: Units,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.title.toUpperCase()}`
    })
  }
});

export const Root = TabNavigator({
  Subjects: {
    screen: SubjectStack,
    navigationOptions: {
      tabBarLabel: 'Subjects',
      tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
    }
  },
  New: {
    screen: New,
    navigationOptions: {
      tabBarLabel: 'Add New Subject',
      tabBarIcon: ({ tintColor }) => <Icon name="plus" size={35} color={tintColor} />
    }
  }
});



// Subjects.js
import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  StatusBar
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { units } from '../../config/data';

class Subjects extends Component {
  onLearnMore = (trip) => {
    this.props.navigation.navigate('Units', {...unit});
  };

  render() {
    return (
      <ScrollView>
        <StatusBar barStyle="dark-content" />
        <List>
          { units.map(unit => (
            <ListItem
                key={unit.id}
                title={unit.title}
                onPress={() => this.onLearnMore(unit)}
              />
          ))}
        </List>
      </ScrollView>
    );
  }
}

export default Subjects;

推荐答案

您需要的路由结构是

StackNavigator({
   Subject, // physics
   Unit, // Physics 101 , Physics 201 , ..
   Chapter, // Chapter 1, ..
})

您需要传递的数据是多种多样的，并且您需要通过某种动作从一种方法跳转到另一种方法.您不需要动态路由，您的内容就必须是动态的.

It's the data that you need to pass varies and the way you need is jumping from one to another on some action. You don't need a dynamic route its your content that has to be dynamic.

这篇关于如何使用StackNavigator创建动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！