[英]Routing with React Navigation in React Native
I'm creating an app in React Native, and I'm using React Navigation. 我正在React Native中创建一个应用程序,并且正在使用React Navigation。 In the main page, I have an array of services.
在主页上,我有一系列服务。 I want to be able to route to different screens in the app based on the indices of the services.
我希望能够根据服务的索引路由到应用程序中的不同屏幕。 This is a snippet of the code.
这是代码段。 How do I do that?
我怎么做?
import React, { Component } from 'react'
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
AppRegistry,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { addNavigationHelpers } from 'react-navigation';
import SelectMultiple from './SelectMultiple';
import PackingPage from './PackingPage';
const services =
['Packing Items in Boxes for Shipping and Moving',
'Unpacking Boxes',
'Wrap Furniture for Moving and Shipping',
'Wrap Machinery',
'Loading / Lumper Services',
'Unloading / Lumper Services',
'Custom Crating for Boxes, Furniture and Machinery',
'Palletizing Services for Boxes, Furniture and Machinery',
'Shipping / Moving Service to 2nd location',
'Heat Shrink wrapping',
'Shipping Food in AC trucks',
'Shipping Food in Non AC Truck',
'Shipping Cars']
class PackingApp extends Component{
static navigationOptions = {
title: '',
};
state = { selectedServices: [] }
onSelectionsChange = (selectedServices) => {
this.setState({ selectedServices })
}
I also have this snippet of code for a stack navigator with two screens so far. 到目前为止,我也有一段代码,用于带有两个屏幕的堆栈导航器。 I'd like to add a screen for each service based on its index.
我想根据其索引为每个服务添加一个屏幕。 I've tried doing that with an if/else, but I cannot get it to work.
我尝试使用if / else来做到这一点,但是我无法使其正常工作。
const PackingNav = StackNavigator({
Home: { screen: HomePage },
PackingPage: { screen: PackingPage },
},
{
headerMode: "none"
});
There's no automatic way to connect your screens in React Navigation to your array of services, you'll need to do that manually: 没有自动的方法可以将React Navigation中的屏幕连接到服务阵列,您需要手动执行以下操作:
const services = [
{ key:'SomeUniqueIdentifier', name:'Packing Items in Boxes for Shipping and Moving' },
{ key:'AnotherUniqueIdentifier', name:'Unpacking Boxes' },
...
];
const PackingNav = StackNavigator({
Home: { screen:HomePageComponent },
SomeUniqueIdentifier: { screen:PackingPageComponent },
AnotherUniqueIdentifier: { screen:UnpackingPageComponent },
...
});
Then in your HomePageComponent
(or whichever component you're linking to the services from), you can do something along the lines of: 然后,在您的
HomePageComponent
(或从中链接到服务的任何组件)中,您可以按照以下方式进行操作:
render() {
const { navigate } = this.props.navigation;
let menu = [];
services.forEach(service => {
menu.push(<Button
onPress={() => navigate(service.key)}
title={service.name}
/>);
});
return (
<View>
{menu}
</View>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.