如何使用 StackNavigator 创建动态路由

Question

我正在尝试学习如何在 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

所以看看这个结构，Physics 将是包含 3 个固定导航项的主屏幕，当您单击其中一个时，它会带您到另一个具有更多导航项的屏幕。需要注意的一件事是，当您在主屏幕上时，您不会知道每个项目有多少个子导航项目，直到您点击其中一个。

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

我只是不太确定如何在那里使用 StackNavigator，因为在您选择一个项目之前不知道需要创建多少 routes/navigation 个项目。

帮忙？

更新这是我现在拥有的代码，它有助于列出 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;

Answer 1

您需要的路由结构是

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

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

如何使用 StackNavigator 创建动态路由

How to create dynamic routes using StackNavigator

react-native

react-navigation

stack-navigator