React Native 动态 StackNavigator

Question

在我的原生应用程序中，我正在使用 createStackNavigator 创建 StackNavigator。我可以使用按钮中的props.navigation.navigate("ScreenName") onPress 事件设置新的导航屏幕，该事件引用给定的“屏幕名称”。

这是我的createStackNavigator的示例

const homeUI = (props) => {
return (
    <View>
        <StatusBar translucent animated backgroundColor="rgba(0, 0, 0, 0.54)" />
        <ScrollView>
            <View style={styles.pngHolder}>
                <Image style={styles.stretch} source={require('../../../assets/pictures/logo.png')} />
                <TouchableOpacity style={styles.imageHolder} onPress={() => {props.navigation.navigate("LoginPanel")}} >
                    <Image style={styles.loginImage} source={require('../../../assets/pictures/IconProfile.png')} />
                </TouchableOpacity>
            </View>
            <MenuButton 
                goTo = {() => {props.navigation.navigate("Demands")}} 
                logo = {require('../../../assets/pictures/Icon01.png')} 
                name="Demands" />
            <MenuButton
                goTo = {() => {props.navigation.navigate('Headquarters')}}
                logo = {require('../../../assets/pictures/Icon02.png')} 
                name="Headquarters" />
            <MenuButton
                goTo= {()=> {props.navigation.navigate("Announcements")}} 
                logo = {require('../../../assets/pictures/Icon03.png')} 
                name="Announcements" />
            <MenuButton 
                goTo = {() => {props.navigation.navigate('Contact')}}
                logo = {require('../../../assets/pictures/Icon07.png')} 
                name="Contact" />
               //and so on.
        </ScrollView>
    </View>
);
}

我可以使用<MenuItem /> 组件在页面之间导航。我想要做的是动态导航屏幕，因为在单击<MenuItem /> 按钮后，在每个组件（需求、公告……）中，我正在获取数据。每个数据都有一系列信息，我想用动态屏幕显示这些数据，但我不知道该怎么做。

这是我刚刚创建的可视化数据示例。 （“+”代表数组，“-”代表信息）。

+ Data  
  - Country
      + City
          - Basel
              - Picture
          - Madrid
              - Picture
  - Sports
      + Tennis
          - Racket
          - Bags 

数据类别的长度彼此不同。我想获取每个项目的最后信息，但由于长度不同，如何创建这样的动态屏幕？

国家 > 城市 > 巴塞尔或马德里 > 信息。

体育 > 网球 > 球拍或包。

这些是我一直在寻找但无法弄清楚的问题。

React Native Creating Navigator Dynamically

How to Create Dynamic Routes

Answer 1

不必创建动态stackNavigator。您可以创建一个屏幕（例如详细信息屏幕），它将接收参数：

this.props.navigation.push('Details', {
    type: 'city',
    id: 'city_id,
})

在加载此屏幕时，您可以访问参数并加载和显示相关数据：

const { type, id } = this.props.navigation.state.params // option 1
const type = this.props.navigation.getParam('type'); // option 2

我用你的虚拟数据创建了一个例子：https://snack.expo.io/@hristoeftimov/react-navigation:-navigate-with-params