Question

在我的本机应用程序中，我正在使用createStackNavigator创建StackNavigator。我可以使用指向给定“ ScreenName”的按钮中的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

反应本机动态StackNavigator

1 个答案: