Question

我正在尝试学习如何在反应本地使用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条路线的屏幕，每条路线都会显示该章节的内容。点击物理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, ..
})

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

如何使用StackNavigator创建动态路由

1 个答案: