如何使用 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

所以看看那个结构，物理将是包含 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;

Answer 1

你需要的路由结构是

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

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