如何使用 StackNavigator 创建动态路由

Posted 2023-02-19

【中文标题】如何使用 StackNavigator 创建动态路由

【英文标题】：How to create dynamic routes using StackNavigator

【发布时间】：2018-09-19 14:44:44

【问题描述】：

我正在尝试学习如何在 react-native 上使用 React Navigation，并偶然发现了这篇文章：https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4。它解释了如何创建具有固定路线的 3 级导航。我的问题是，当某些路线应该是动态的时，您如何创建 3 级或更多级别的导航。屏幕结构如下所示：

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 个固定导航项的主屏幕，当您单击一个时，它将带您到另一个具有更多导航项的屏幕。需要注意的一点是，当您在主屏幕上时，您不会知道每个项目有多少子导航项目，直到您点击一个。

例如，如果您点击物理 101，您将被带到一个屏幕，其中包含 3 条路线，每条路线都将显示该章的内容。点击 Physics 305 将带您进入包含 8 个导航项等的屏幕。

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

帮助？

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

// 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;

【问题讨论】：

通过查看您的结构，我假设章节路由将在 content 和 styles 中具有 change 和一些次要功能，因此为它们制作组件和将它们推送到您的堆栈中。这将提高您的效率。

我可以创建一个组件来获取每个章节的数据并相应地格式化它们，我现在遇到的问题是我不知道如何添加另一个可能有 3 个章节的堆栈/一个导航项目，另一个导航项目 10，等等。

【参考方案1】：

你需要的路由结构是

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

您需要传递的数据各不相同，而您需要的方式是在某些操作上从一个跳到另一个。您不需要动态路由，您的内容必须是动态的。

【讨论】：

我添加了到目前为止我所拥有的代码示例，但仍然不确定如何获得列出的章节

哦，是的，我明白了！