在我的本机应用程序中,我正在使用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
任何帮助将不胜感激。非常感谢。
答案 0 :(得分:2)
没有必要创建动态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